JS form wont validate phone number
Question
So i was making a simple web page to order a pizza as an assignment. I am supposed to take in data and also supposed to validate the form as well. so i wrote just a plain html and a simple JS code. The name and the email validates, but when it comes to validating phone number, it doesn't validate. I wrote a simple(but wrong on extreme cases) RegEx for the phone number validation, but it doesnt validate, i can write anything in the phone number textfield and the form accepts it when i click on submit. Thanks for your help.
function validateForm(){ //validate name var name = document.getElementById("name").value; if(name=="" || !(/^[a-zA-Z ]+$/.test(name))){ document.getElementById("name_error").innerHTML = " Invalid Username"; return false } //validate email var email = document.getElementById("em").value; var atposition=email.indexOf("@"); var dotposition=email.lastIndexOf("."); if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=x.length){ document.getElementById("email_error").innerHTML = " Invalid Email"; return false; } //validate phone Number var phno = document.getElementById("pno").value; if(phno == "" || !(/^[0-9]{10}$/.test(phno))){ document.getElementById("phone_error").innerHTML = " Invalid phone number"; return false; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form name="form1" onsubmit = "return validateForm()"> <fieldset> <legend>personal details</legend> <label for="name">Name:</label><br> <input type="text" name="Name" id="name"><span id="name_error"></span><br> <label for="em">Email:</label><br> <input type="text" name="e-mail" id="em" ><span id="email_error"></span><br> <label for="pno">Phone No.:</label><br> +91<input name="Phone Number" id="pno" maxlength="10"><span id="phone_error"></span><br> </fieldset> <fieldset> <legend>select pizza</legend> <input type="radio" id="simply_veg" name="select_pizza" value="Simpy Veg"><label for="simply_veg">Simply Veg</label><br> <input type="radio" id="veg_sup" name="select_pizza" value="Veg Supreme"><label for="veg_sup">Veg Supreme</label><br> <input type="radio" id="veg_del" name="select_pizza" value="Veg Delight"><label for="veg_del">Veg Delight</label><br> <div name="piz_not_sel"></div> </fieldset> <fieldset> <legend>select pizza size</legend> <input type="radio" id="pers_pan" name="select pizza size"><label for="pers_pan">Personal Pan</label><br> <input type="radio" id="med" name="select pizza size"><label for="med">Medium</label><br> <input type="radio" id="lar" name="select pizza size"><label for="lar">Large</label><br> </fieldset> <fieldset> <legend>select crust</legend> <input type="radio" id="thin" name="select crust"><label for="thin">Thin</label><br> <input type="radio" id="norm" name="select crust"><label for="norm">Normal</label><br> <input type="radio" id="spec" name="select crust"><label for="spec">Special</label><br> </fieldset> <fieldset> <legend>select payment option</legend> <label for="pay_opn">Choose a car:</label> <select id="pay_opn" name="pay_opn" required> <option value="COD">COD</option> <option value="Debit Card">Debit Card</option> <option value="Credit Card">Credit Card</option> <option value="UPI">UPI</option> </select><br> </fieldset> <fieldset> <legend>promo code</legend> <label for="code">Please enter code if any </label><textarea id="code" name="code" rows="1" cols="9" maxlength="9" placeholder="PIZDIS090"></textarea><br> </fieldset> <fieldset> <legend>Terms and Conditions</legend> <input type="checkbox" id="tnc" name="termncond"><label for="tnc">I agree to the Terms and Conditions</label> </fieldset> <input type="submit" value="submit"><input type="reset"> <div id="otpt"></div> </form> <script src="pizza_validate.js"> </script> </body> </html>
PS:There is something wierd i noticed that when I move the PhoneNumber validation block above that of Name block, it works perfectly from there on.
1 answers
solution1
0 2022-06-02 16:01:34
Your return false statement will cause the reported behavior. Update the script as below. However this will show the validation messages, but not remove the validation messages, for that either add else condition and remove validation message for valid data or add onblur/keyUp events to handle this.
function validateForm(){
var isValid = true;
//validate name
var name = document.getElementById("name").value;
if(name=="" || !(/^[a-zA-Z ]+$/.test(name))){
document.getElementById("name_error").innerHTML = " Invalid Username";
isValid = false;
}
//validate email
var email = document.getElementById("em").value;
var atposition=email.indexOf("@");
var dotposition=email.lastIndexOf(".");
if (email=="" || atposition<1 || dotposition<atposition+2 || dotposition+2>=email.length){
document.getElementById("email_error").innerHTML = " Invalid Email";
isValid = false;
}
//validate phone Number
var phno = document.getElementById("pno").value;
if(phno == "" || !(/^[0-9]{10}$/.test(phno))){
document.getElementById("phone_error").innerHTML = " Invalid phone number";
isValid = false;
}
return isValid;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.