Question

In: Computer Science

I already have an alert message that pops up when the number is not filled in...

I already have an alert message that pops up when the number is not filled in correctly. How would I change that alert function to something similar to this function.

<!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 my complete code that I would like to keep plus having the right message 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(){
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>

Solutions

Expert Solution

So I am going to Edit your second code with Implementation of Alert message:

<!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!==phone){
alert("Please Enter Valid Phone number!!"); // alert Box in case Phone number format is wrong.
} 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>

This Code should Alert User that Number Format is not right.

Please Consider a Thumps-up(like),It helps alot to answer such questions.

venereology answered 1 year ago
Next > < Previous

Related Solutions

I have the following python code. I get the following message when running it using a...
I have the following python code. I get the following message when running it using a test script which I cannot send here: while textstring[iterator].isspace(): # loop until we get other than space character IndexError: string index out of range. Please find out why and correct the code. def createWords(textstrings): createdWords = [] # empty list for textstring in textstrings: # iterate through each string in trxtstrings iterator = 0 begin = iterator # new begin variable while (iterator <...
Java homework problem: I need the code to be able to have a message if I...
Java homework problem: I need the code to be able to have a message if I type in a letter instead of a number. For example, " Please input only numbers". Then, I should be able to go back and type a number. import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import javax.swing.JButton; import javax.swing.JFrame; import javax.swing.JLabel; import javax.swing.JPanel; import javax.swing.JTextField; public class LoginGui {    static JFrame frame = new JFrame("JFrame Example");    public static void main(String s[]) {        JPanel panel...
So I have a lab practical coming up; how do I know when to take an...
So I have a lab practical coming up; how do I know when to take an IR spec versus making a TLC chamber? Follow up question: Can someone walk me through the interpretation of a TLC chamber?
I already have the code of this program, I just want to know how to fix...
I already have the code of this program, I just want to know how to fix the code to Implement the 5th function （System.nanotime() and System.currentTimeMillis() methods） What Code does: Introduction Searching is a fundamental operation of computer applications and can be performed using either the inefficient linear search algorithm with a time complexity of O (n) or by using the more efficient binary search algorithm with a time complexity of O (log n). Task Requirements In this lab, you...
3) I have an ionization detector that is filled with a gas that undergoes ionization with...
3) I have an ionization detector that is filled with a gas that undergoes ionization with on average 100 eV of input energy. A positive voltage is applied to a wire running down the center of the cylindrical detector, while the outer cylinder wall is held at negative voltage; I can control both of those voltages. a) I find that when I measure a Cs-137 source and then a Co-60 source at one voltage, I find that measured currents are...
How can I convert inRange in cv2 to PIL? For example, I already have mask =...
How can I convert inRange in cv2 to PIL? For example, I already have mask = cv2.inRange(img, array1, array2) but I'm trying to keep everything in PIL. Any ideas would be appreciated!
I have already created the journal entries for the following information but I need the t-accounts,...
I have already created the journal entries for the following information but I need the t-accounts, income statement, statement of retained earning and balance sheet: The following transactions occurred during 2018 (the company uses a perpetual inventory system with FIFO): 1)      Jan 4 Stockholders invested an additional $10,000 cash in the business in exchange for common stock 2)      Jan 4 Purchased 20 rabbits at $50 each on account from Jelly Bean Farms. 3)      Jan 4 Established a $200 petty change...
explain your answer step by step, i already have the answer but i need the explnations...
explain your answer step by step, i already have the answer but i need the explnations and type your answer, thanks 4 FeS2   +   11 O2    ®    2 Fe2O3    +    8 SO2 1.    How many moles of oxygen are required to react with 3.75 moles of FeS2?        2.    How many moles of Fe2O3 are formed when 2.83 moles of oxygen reacts with        excess FeS2? 3.    How many moles of SO2 are formed when 2.81 moles of Fe2O3 are...
If i can have the chart filled out with work for my understanding. I would greatly...
If i can have the chart filled out with work for my understanding. I would greatly appreciate it. An agent for a residential real estate company in a large city would like to be able to predict the monthly rental cost for apartments, based on the size of an apartment, as defined by square footage. The agent selects a sample of 25 apartments in a particular residential neighborhood and collects the data below. Apartment         Monthly Rent ($)       Size (Sq. Feet)...
These only need to be short essay answers, I have answered a few already. This is...
These only need to be short essay answers, I have answered a few already. This is due oct. 31st at 11:59 pm ESSAY: RECEIVABLES: Define Accounts Receivable. Accounts Receivable is an account where businesses can keep track of services they have pervaded without the payment from a client. For example, hospitals would use this when journaling the action when a patient is treated without payment. Account Receivables are journaled as increasing with a debit. All of #2 essay questions follow...
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT