Created
November 28, 2016 21:51
-
-
Save ncou/5c98d6e1829e3ab6d2fef4b22a606726 to your computer and use it in GitHub Desktop.
Simple JavaScript Form Validation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <title>JavaScript HOMEWORK</title> | |
| <style> | |
| strong{ | |
| font-style:italic; | |
| font-size:20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <fieldset> | |
| <legend><h2>Sign up</h2></legend> | |
| <form> | |
| <label><strong>Name : </strong></label><input type="text" name="name" /><br/><br/> | |
| <label><strong>Age : </strong></label> | |
| <input type="radio" value="Below 18" name="age"/> Below 18 | |
| <input type="radio" value="Above 18 and Below 40" name="age"/> Above 18 Below 40 | |
| <input type="radio" value="Above 40" name="age"/> Above 40<br/><br/> | |
| <label><strong>Gender : </strong></label> | |
| <input type="radio" value="Male" name="gender"/> Male | |
| <input type="radio" value="Female" name="gender"/> Female<br/><br/> | |
| <input type="submit" value="Sign up" onclick="return validateForm()"/> | |
| </form> | |
| </fieldset> | |
| <script> | |
| var fields = document.getElementsByTagName("input"); | |
| var regExp = /^([A-Za-z ]{2,30})$/; | |
| var name,age,gender; | |
| function validateForm(){ | |
| if(fields[0].value.match(regExp)){ // Checking The Name with Regular Expression | |
| name = fields[0].value; | |
| }else{ | |
| alert('Name must not empty!'); | |
| return false; | |
| } | |
| if(fields[1].checked){ // Checking the Age fields | |
| age = fields[1].value; | |
| }else if(fields[2].checked){ | |
| age = fields[2].value; | |
| }else if(fields[3].checked){ | |
| age = fields[3].value; | |
| }else{ | |
| alert('Select your Age!'); | |
| return false; | |
| } | |
| if(fields[4].checked){ // Checking the Gender fields | |
| gender = fields[4].value; | |
| }else if(fields[5].checked){ | |
| gender = fields[5].value; | |
| }else{ | |
| alert('Select your Gender!'); | |
| return false; | |
| } | |
| alert("Information Success!\n"+"\nName: "+name+"\nAge: "+age+"\nGender: "+gender); | |
| return confirm("Do you want to Submit it?"); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment