Question

In: Computer Science

Is there a way to have the same response when someone does not fill out the...

Is there a way to have the same response when someone does not fill out the number correctly on my second code. Is there a way to not use the alert.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>

<script>
   function phonenumber(inputtxt){
      
   var phoneno = (\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4};
  
   if(inputtxt.value.match(phoneno)){
       document.getElementById("yourEntry").innerHTML = document.getElementById("myphone").value;
   }
   //if(!inputtxt.value.match(phoneno)){
       // alert("Does not Work!")
       //}
   }
</script>
</head>

<body>
<form name="form1" action="#">
<input type="text" name="myphone" id="myphone" value="" pattern= "(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="(555) 555-1212" required />
<input type="submit" value="Submit" onclick="phonenumber(document.form1.myphone)"/>
</form>
Your results are as follows:
<p id="yourEntry">
</p>
</body>
</html>

Here is the complete code that I have so far. My goal is to use the same alert as the first code shown.

<!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() {

//checking phone number

if(phonenumber(document.getElementById('phone').value))

{

//when phone number is valid

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;

}

  

}

//function to validate phone number

function phonenumber(inputtxt) {

//regular expression for phone number

var phoneno = /^(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}/;

//checking phone number

if (inputtxt.match(phoneno)) {

//when phone number is valid

return true;

}

else{

alert("Phone number is invalid!");//alert to the user

return false;

}

  

}

</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

Yes, there is a way - you have to use an HTML5 form. In the first code snippet, an HTML5 form is used. The form validation is taking place just because of that. It has nothing to do with the onclick and the code written in the phonenumber function.

If you check the log when you load the first code snippet in the browser, you will find the error logs in the code. Here is a documented correct way of triggering the validation bubble in the first code snippet:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document Title</title>
</head>
<body>
    <form name="form1" action="#">
        <input type="text" name="myphone" id="myphone" value="" pattern= "(\(\d{3}\)|\d{3})[-\s]\d{3}-\d{4}" placeholder="(555) 555-1212" required />
        <!-- I have changed the type of the button below and introduced a hidden button which is there to actually submit the form -->
        <input type="button" value="Submit" onclick="phonenumber()"/>
        <input id="submitButton" type="submit" value="Submit" hidden>
    </form>

    Your results are as follows:
    <p id="yourEntry"></p>

    <script>
function phonenumber()
{
    // this function is triggerred by clicking the Submit button
    if(document.getElementsByName('form1')[0].checkValidity())
    {
        // if the validation fails, the bubble shows the error message
        // otherwise, the hidden button with id: submitButton is clicked and the form submission takes place 
        document.getElementById('submitButton').click();
    }
}
    </script>
</body>
</html>

Similarly, you can introduce a form in the second code snippet you wrote and add a hidden button for submission. Remember to use the other button just to call the function, no submission using that. The function will click the hidden button if the HTML5 validation succeeds, otherwise it will show the validation bubble.

Hope this helps! :)

venereology answered 1 year ago
Next > < Previous

Related Solutions

**DO NOT FILL OUT THE QUESTIONAIRE, IT IS NOT ASKING TO FILL IT OUT** Below is...
**DO NOT FILL OUT THE QUESTIONAIRE, IT IS NOT ASKING TO FILL IT OUT** Below is the second page of a survey questionnaire. " Spot four poorly designed features in such page " : ... ... ... ... ... ... ... ... 2. State your age in years _ _ 3. How long have you used the Internet? (check one only) _ < 1 year _ 1 - 4 years _ 4 - 8 years _ > 8 years 4....
Please give a detailed explanation, not just the response. If possible, a way to work out...
Please give a detailed explanation, not just the response. If possible, a way to work out the problem in Excel is helpful! Thanks in advance! According to the Carnegie unit system, the recommended number of hours students should study per unit is 2. Are statistics students' study hours less than the recommended number of hours per unit? The data show the results of a survey of 16 statistics students who were asked how many hours per unit they studied. Assume...
Explain why hydraulic fill is a poor way to place fill.
Explain why hydraulic fill is a poor way to place fill.
When someone falls from a tall building, the most effective way to save him is to...
When someone falls from a tall building, the most effective way to save him is to provide a net at the bottom so that the person slows down himself conveniently without hurting himself, the impulse here is same that would have been without the net but the net provides extra time for the change in momentum. Another example is, in the game of cricket when the ball is hit by the bat the time to change the momentum is expected...
What does it mean when someone says "no gene is an island"?
What does it mean when someone says "no gene is an island"?
A recent study shows that unemployment does not impact males and females in the same way...
A recent study shows that unemployment does not impact males and females in the same way (Newsweek, April 20, 2009). According to a Bureau of Labor Statistics report, 8.5% of those who are eligible to work are unemployed. The unemployment rate is 8.8% for eligible men and only 7.0% for eligible women. Suppose 52% of the eligible workforce in the U.S. consists of men. a. You have just heard that another worker in a large firm has been laid off....
There is a __________ between two identical objects that have been charged in the same way....
There is a __________ between two identical objects that have been charged in the same way. Choose one from below and explain. a) short range repulsive force b) short range attractive force c) long range repulsive force d) long range attractive force
What does Gladwell mean when he says someone is a Connector? What characteristics make someone a...
What does Gladwell mean when he says someone is a Connector? What characteristics make someone a Connector? What does Gladwell mean when he says someone is a Maven? What characteristics make someone a Maven? What does Gladwell mean when he says someone is a Salesperson? What characteristics make someone a Salesperson? Why are these three types of individuals so critical to the development of social epidemics?
When someone embarks on a change in their health, does that now mean they are more...
When someone embarks on a change in their health, does that now mean they are more "Well" too? Explain in two to three sentences.
how to fill out a bcg matrix
how to fill out a bcg matrix
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT