Question

In: Computer Science

Here is what I have so far. I have created a code where a user can...

Here is what I have so far. I have created a code where a user can enter in their information and when they click submit all of the information is shown. How can I add a required field for the phone number without using an alert?

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form Design</title>
<link rel="stylesheet" type="text/css" href="signin.css">

<script>
function myFunction(){
document.getElementById('demo').innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value + " " + document.getElementById('street').value + " " + document.getElementById('city').value + " " + document.getElementById('zcode').value + " " + document.getElementById('email').value + " " + document.getElementById('phone').value;
}
</script>
</head>

<body>
<div class="login-page">
<div class="form">
<br>
<h1> Register </h1>
<input type="text" id="fname" placeholder="first name"/>
<input type="text" id="lname" placeholder="last name"/>
<input type="text" id="street" placeholder="street address"/>
<input type="text" id="city" placeholder="city"/>
<input type="text" id="zcode" placeholder="zip code"/>
<input type="text" id="email" placeholder="email address"/>
<input type="text" id="phone" value="" pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="XXX-XXX-XXXX" required/>
<button onclick="myFunction()">Create</button>
<label for="create login" id="create login"></label>
<p id="demo"></p>
</div>
</div>


</body>
</html>

Solutions

Expert Solution

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Login and Registeration Form Design</title>
<link rel="stylesheet" type="text/css" href="signin.css">

<script>
function myFunction(){
phoneno = document.getElementById('phone').value;
console.log("qer"+phoneno);
var error = document.getElementById("error")
if(phoneno===""){
// Changing content and color of content
error.textContent = "Please enter a valid number"
error.style.color = "red"
} else {
error.textContent = ""
document.getElementById('demo').innerHTML = document.getElementById('fname').value + " " + document.getElementById('lname').value + " " + document.getElementById('street').value + " " + document.getElementById('city').value + " " + document.getElementById('zcode').value + " " + document.getElementById('email').value + " " + document.getElementById('phone').value;
}
}
</script>
</head>

<body>
<div class="login-page">
<div class="form">
<br>
<h1> Register </h1>
<input type="text" id="fname" placeholder="first name"/>
<input type="text" id="lname" placeholder="last name"/>
<input type="text" id="street" placeholder="street address"/>
<input type="text" id="city" placeholder="city"/>
<input type="text" id="zcode" placeholder="zip code"/>
<input type="text" id="email" placeholder="email address"/>
<input type="text" id="phone" value="" pattern="(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="XXX-XXX-XXXX" required/>
<span id="error"></span>
<button onclick="myFunction()">Create</button>
<label for="create login" id="create login"></label>
<p id="demo"></p>
</div>
</div>
</body>
</html>

Note: If you want to use "required" attribute, use form tag and submit button. To create form and submit it. Otherwise it won't work. Here, I have used javascript to check if the value is null or not and show error message accordingly.

venereology answered 1 year ago
Next > < Previous

Related Solutions

The code following is what I have so far. It does not meet my requirements. My...
The code following is what I have so far. It does not meet my requirements. My problem is that while this program runs, it doesn't let the user execute the functions of addBook, isInList or compareLists to add, check, or compare. Please assist in correcting this issue. Thank you! Write a C++ program to implement a singly linked list of books. The book details should include the following: title, author, and ISBN. The program should include the following functions: addBook:...
Here is my C++ program so far. Is there anyway I can make it display an...
Here is my C++ program so far. Is there anyway I can make it display an error if the user enters a float? Thanks #include <iostream> using namespace std; // Creating a constant for the number of integers in the array const int size = 10; int main() { // Assigning literals to the varibles int a[size]; int sum=0; float avg; // For loop that will reiterate until all 10 integers are entered by the user for(int i=0; i<size; i++)...
This is what I have so far. The out print I am looking for is Date...
This is what I have so far. The out print I am looking for is Date is 7/22/2020 New month: 9 New day: 5 New Year: 2020 Date is 9/5/2020 #include    class Date {    public:        Date::Date(int dateMonth, int dateDay, int dateYear)        month{dateMonth}, day{dateDay}, int dateYear}{}               //void displayDate();         //set month        void Date::setMonth(std::int dateMonth){            month = dateMonth;        }        //retrieve month   ...
How to schematize a diagnostic argument? This is what i have so far not sure if...
How to schematize a diagnostic argument? This is what i have so far not sure if its right, need help with this one in order to figure out rest of homework. ----------- IQ: Is drinking milk healthy? (5 items of Support TD or NTD) S1: S2: S3: S4: S5: C1: More than half of the population in north America are lactose intolerant meaning they cannot digest milk properly. C2: Article: https://milk.procon.org/
I have solved most of question and the answers I have so far are correct, I...
I have solved most of question and the answers I have so far are correct, I just need help finding out the lower bound and upper bound (All answers were generated using 1,000 trials and native Excel functionality.) Galaxy Co. distributes wireless routers to Internet service providers. Galaxy procures each router for $75 from its supplier and sells each router for $125. Monthly demand for the router is a normal random variable with a mean of 100 units and a...
So I have written a code for it but i just have a problem with the...
So I have written a code for it but i just have a problem with the output. For the month with the highest temperature and lowest temperature, my code starts at 0 instead of 1. For example if I input that month 1 had a high of 20 and low of -10, and every other month had much warmer weather than that, it should say "The month with the lowest temperature is 1" but instead it says "The month with...
I have to create a program in C++ where a user can enter as many numbers...
I have to create a program in C++ where a user can enter as many numbers as they want (they predetermine the number of values to be inputted) and then the program can echo that input back to the user and then determine if the numbers were even, odd, or a zero and it outputs how many of each were found. This is to be down with four void functions and no arrays. The program initializes the variables zero, odds,...
Using the provided code (found here), write a program using the main method where the user...
Using the provided code (found here), write a program using the main method where the user enters Strings and the program echoes these strings to the console until the user enters “quit”. When user quits the program should print out, “Goodbye”. You may assume that the case is ignored when the user enters, “quit”, so “quit”, “QUIT”, “Quit”,“qUiT”, etc. are all acceptable ways to end the program. The results should be printed out to the console in the following format:...
Write code that would go where the comment "#your line will go here" so that the...
Write code that would go where the comment "#your line will go here" so that the code would successfully extract all names of dishes from the dictionary popular_foods that have at least one of the following ingredients: popular_foods = {"Clam Chowder": {"Country": "United States", "Main Ingredients": ["clam", "onion", "celery", "potato", "carrot", "butter", "flour", "cream", "red wine vinegar"]}, "Xiaolongbao": {"Country": "China", "Main Ingredients": ["flour", "pork", "crab meat", "roe", "soy sauce", "ginger", "rice wine", "green onions"]}, "Feijoada": {"Country": "Brazil", "Main Ingredients": ["black...
What I have so far is bold. Question: The Mars company claims that 13 percent of...
What I have so far is bold. Question: The Mars company claims that 13 percent of M&M’s plain candies distributed into bags are brown. Investigate this claim with an appropriate hypothesis test. Use a significance level of α = 0.05. 1. What is the parameter of interest in this situation? Brown M&Ms = .13 2. Null hypothesis: Ho: p= .13 3. Alternative hypothesis: Ha: p does not = .13 4. Color Count Brown 7 Non-Brown 49 Total 56 5. What...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT