Learn how can we do a form validation using JavaScript. If a form field (fname) is empty, this function alerts a message, and returns false.
Validate mobile number field in JavaScript.
Validate email id field in JavaScript.
validation.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
<script> function validate(){ var a = document.form.mobile.value; var cars=document.getElementsByName("car"); if(document.getElementById('name').value==''){ alert("Please Enter your Name"); document.getElementById('name').focus(); return false; } if(document.getElementById('email').value==''){ alert("Please Enter your Email Address"); document.getElementById('email').focus(); return false; } if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.getElementById('email').value)) { alert("Invalid E-mail Address! Please re-enter your address.") document.getElementById('email').focus(); return false; } if(document.getElementById('mobile').value==''){ alert("Please Enter Your mobile Number"); document.getElementById('mobile').focus(); return false; } else if(!IsNumeric(document.getElementById('mobile').value)){ alert("Phone No. you entered is not correct"); document.getElementById('mobile').focus(); return false; } else if((a.length < 10) || (a.length > 10)){ alert("Please Enter 10 digit mobile Number"); document.getElementById('mobile').focus(); return false; } if(document.getElementById('city').value==''){ alert("Please select your city"); document.getElementById('city').focus(); return false; } if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; } if (cars.length === 0) { alert('Please select atleast 1 car'); return false; } } function IsNumeric(strString) // check for valid numeric strings { var strValidChars = "0123456789"; var strChar; var blnResult = true; if (strString.length == 0) return false; // test strString consists of valid characters listed above for (i = 0; i < strString.length && blnResult == true; i++) { strChar = strString.charAt(i); if (strValidChars.indexOf(strChar) == -1) { blnResult = false; } } return blnResult; } </script> |
form.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script src="validation.js"></script> <form method="post" name="form" action="" onsubmit="return validate();"> <input type="text" name="name" id="name" placeholder="Name"></br> <input type="text" name="email" id="email" placeholder="Email"></br> <input type="text" name="mobile" id="mobile" placeholder="Mobile"></br> <select name="city" id="city"> <option value="">Select City</option> <option value="1">Delhi</option> <option value="2">Noida</option> <option value="3">Gurgaon</option> </select></br> Gender : <input type="radio" name="gender" value="Male"> Male <input type="radio" name="gender" value="Female">Female</br> Fav Car: <input type="checkbox" name="car[]" value="1">BMW <input type="checkbox" name="car[]" value="2">Honda <input type="checkbox" name="car[]" value="3">Swift</br> <input type="submit" name="submit" value="Submit"> </form> |
