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 2 years ago
Next > < Previous

Related Solutions

Hi, I have this code so far and need to modify it so that the output...
Hi, I have this code so far and need to modify it so that the output does not print something like 2x^0 but instead will just print 2. Currently it prints 2x^0. I also am having a problem with the output of Polynomial 1 - Polynomial 2. If both coefficient values for the polynomials are equal instead of Polynomial 1 - Polynomial 2 = 0 it outputs nothing. Just Polynomial 1 - Polynomial 2 = For example if I input...
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++)...
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:...
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...
Hello, I have created the following code in C++. The goal of this code is to...
Hello, I have created the following code in C++. The goal of this code is to read 3 types of employee information(String/*Name*/, String/*Phone number*/,Int/*Office number*/, ) from a .txt file and store that information into an array which can be accessed by various functions. The code below is within a header file, and im trying to define some functions (within a .cpp file) of my class to carry out the following tasks. I have already managed to define a couple...
Hi, I have created the following code and I was wondering if it is possible to...
Hi, I have created the following code and I was wondering if it is possible to make an "if" statement in the first for loop that would output an error if the user enters a float, character or string? I was thinking of something along the lines of: if(a[i] != int) but that didn't work :( Thank you. #include <iostream> using namespace std; // Creating a constant for the number of integers in the array const int size = 10;...
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...
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