
HTML Form Validation Using JavaScript Tutorial: Here is a simple HTML Form validation script using JavaScript. Learn how to create an HTML Form Validation script with an example. Follow and Like us on Facebook, Twitter, LinkedIn, Pinterest for the latest posts.
Example of HTML Form Validation Using JavaScript
Example: Html form validation reference
<!DOCTYPE html> <html lang="en-US"> <head> <title>form validation reference</title> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <script type="text/javascript"> function validateform(form) { if(form.name.value == "") { alert("Error: Please Enter Name"); form.name.focus(); return false; } if(form.email.value == "") { alert("Error: Please Enter Email"); form.email.focus(); return false; } var x = form.email.value; var atpos = x.indexOf("@"); var dotpos = x.lastIndexOf("."); if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); form.email.focus(); return false; } var phone_no = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; if(form.contact_number.value != "" && form.contact_number.value.match(phone_no)) { return true; } else { alert("Not a valid Phone Number"); return false; } if(form.state.value == "none") { alert("Error: please select a state"); form.state.focus(); return false; } if(form.password.value != "" && form.password.value == form.confirm_password.value) { if(form.password.value.length < 6) { alert("Error: Password must contain at least six characters!"); form.password.focus(); return false; } if(form.password.value == form.email.value) { alert("Error: Password must be different from Username!"); form.password.focus(); return false; } re = /[0-9]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one number (0-9)!"); form.password.focus(); return false; } re = /[a-z]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one lowercase letter (a-z)!"); form.password.focus(); return false; } re = /[A-Z]/; if(!re.test(form.password.value)) { alert("Error: password must contain at least one uppercase letter (A-Z)!"); form.password.focus(); return false; } } else { alert("Error: Please check that you've entered and confirmed your password!"); form.password.focus(); return false; } } </script> </head> <body> <form action="" method="post" onsubmit="return validateform(this);"> <table> <tr> <td>Name : </td> <td><input type="text" name="name" placeholder="Name" /></td> </tr> <tr> <td>Email : </td> <td><input type="text" name="email" placeholder="Email" /></td> </tr> <tr> <td>Mobile : </td> <td><input type="text" name="contact_number" placeholder="Contact_Number" /></td> </tr> <tr> <td>State : </td> <td><select name="state"> <option value="none">Please Select a State</option> <option>Bihar</option> <option>Delhi</option> <option>Goa</option> <option>Gujarat</option> <option>Haryana</option> <option>Jammu and Kashmir</option> <option>Jharkhand</option> <option>Madhya Pradesh</option> <option>Maharashtra</option> <option>Punjab</option> <option>Rajasthan</option> <option>Sikkim</option> <option>Uttar Pradesh</option> <option>Uttarakhand</option> <option>West Bengal</option> <option>Chandigarh</option> </select> </td> </tr> <tr> <td>Password : </td> <td><input type="password" name="password" placeholder="Password" /></td> </tr> <tr> <td>Confirm Password : </td> <td><input type="password" name="confirm_password" placeholder="Confirm Password" /></td> </tr> <tr> <td><input type="submit" name="submit_btn" value="Submit" /></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </form> </div><!-- End .form-container--> </div><!-- End .wrapper--> </body> </html>
Web Design Reference Guide Android App for Website Developers
Web Design Reference Guide Android App: Web Design Tutorial App is a tutorial and reference-based app. It provides Web Design Tutorial and Reference to Web Designers or Web Developers to grow their Web Development skills.
Other Related Posts
- HTML Tutorial – Learn How to Design an HTML Page
- Six Proven Ways to Earn Money from a Blog | Web Design Reference
- 24 Easy and Free SEO Tools to Improve Your Marketing
- CSS3 Gradient Tutorial and CSS3 Gradient Reference
- HTML Form Validation Using JavaScript Tutorial
- Google Fonts Implementation Guide – How to use Google Fonts
- Responsive Web Template Using Bootstrap Tutorial
- Responsive Web Template Tutorial Using Media Queries
- Learn Basic HTML5 Concept – HTML5 Reference Guide