| <!DOCTYPE html> | |
| <html lang="en"><head> | |
| <script> | |
| function formValidation() | |
| { | |
| var uid = document.registration.userid; | |
| var passid = document.registration.passid; | |
| var uname = document.registration.username; | |
| var uadd = document.registration.address; | |
| var ucountry = document.registration.country; | |
| var uzip = document.registration.zip; | |
| var uemail = document.registration.email; | |
| var umsex = document.registration.msex; | |
| var ufsex = document.registration.fsex; if(userid_validation(uid,5,12)) | |
| { | |
| if(passid_validation(passid,7,12)) | |
| { | |
| if(allLetter(uname)) | |
| { | |
| if(alphanumeric(uadd)) | |
| { | |
| if(countryselect(ucountry)) | |
| { | |
| if(allnumeric(uzip)) | |
| { | |
| if(ValidateEmail(uemail)) | |
| { | |
| if(validsex(umsex,ufsex)) | |
| { | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| return false; | |
| } function userid_validation(uid,mx,my) | |
| { | |
| var uid_len = uid.value.length; | |
| if (uid_len == 0 || uid_len >= my || uid_len < mx) | |
| { | |
| alert("User Id should not be empty / length be between "+mx+" to "+my); | |
| uid.focus(); | |
| return false; | |
| } | |
| return true; | |
| } | |
| function passid_validation(passid,mx,my) | |
| { | |
| var passid_len = passid.value.length; | |
| if (passid_len == 0 ||passid_len >= my || passid_len < mx) | |
| { | |
| alert("Password should not be empty / length be between "+mx+" to "+my); | |
| passid.focus(); | |
| return false; | |
| } | |
| return true; | |
| } | |
| function allLetter(uname) | |
| { | |
| var letters = /^[A-Za-z]+$/; | |
| if(uname.value.match(letters)) | |
| { | |
| return true; | |
| } | |
| else | |
| { | |
| alert('Username must have alphabet characters only'); | |
| uname.focus(); | |
| return false; | |
| } | |
| } | |
| function alphanumeric(uadd) | |
| { | |
| var letters = /^[0-9a-zA-Z]+$/; | |
| if(uadd.value.match(letters)) | |
| { | |
| return true; | |
| } | |
| else | |
| { | |
| alert('User address must have alphanumeric characters only'); | |
| uadd.focus(); | |
| return false; | |
| } | |
| } | |
| function countryselect(ucountry) | |
| { | |
| if(ucountry.value == "Default") | |
| { | |
| alert('Select your country from the list'); | |
| ucountry.focus(); | |
| return false; | |
| } | |
| else | |
| { | |
| return true; | |
| } | |
| } | |
| function allnumeric(uzip) | |
| { | |
| var numbers = /^[0-9]+$/; | |
| if(uzip.value.match(numbers)) | |
| { | |
| return true; | |
| } | |
| else | |
| { | |
| alert('ZIP code must have numeric characters only'); | |
| uzip.focus(); | |
| return false; | |
| } | |
| } | |
| function ValidateEmail(uemail) | |
| { | |
| var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/; | |
| if(uemail.value.match(mailformat)) | |
| { | |
| return true; | |
| } | |
| else | |
| { | |
| alert("You have entered an invalid email address!"); | |
| uemail.focus(); | |
| return false; | |
| } | |
| } function validsex(umsex,ufsex) | |
| { | |
| x=0; | |
| if(umsex.checked) | |
| { | |
| x++; | |
| } if(ufsex.checked) | |
| { | |
| x++; | |
| } | |
| if(x==0) | |
| { | |
| alert('Select Male/Female'); | |
| umsex.focus(); | |
| return false; | |
| } | |
| else | |
| { | |
| alert('Form Succesfully Submitted'); | |
| window.location.reload() | |
| return true; | |
| } | |
| } | |
| </script> | |
| <meta charset="utf-8"> | |
| <title>JavaScript Form Validation using a sample registration form</title> | |
| <meta name="keywords" content="example, JavaScript Form Validation, Sample registration form" /> | |
| <meta name="description" content="This document is an example of JavaScript Form Validation using a sample registration form. " /> | |
| <link rel='stylesheet' href='js-form-validation.css' type='text/css' /> | |
| <script src="sample-registration-form-validation.js"></script> | |
| </head> | |
| <body onload="document.registration.userid.focus();"> | |
| <h1>Registration Form</h1> | |
| Use tab keys to move from one input field to the next. | |
| <form name='registration' onSubmit="return formValidation();"> | |
| <ul> | |
| <li><label for="userid">User id:</label></li> | |
| <li><input type="text" name="userid" size="12" /></li> | |
| <li><label for="passid">Password:</label></li> | |
| <li><input type="password" name="passid" size="12" /></li> | |
| <li><label for="username">Name:</label></li> | |
| <li><input type="text" name="username" size="50" /></li> | |
| <li><label for="address">Address:</label></li> | |
| <li><input type="text" name="address" size="50" /></li> | |
| <li><label for="country">Country:</label></li> | |
| <li><select name="country"> | |
| <option selected="" value="Default">(Please select a country)</option> | |
| <option value="AF">Australia</option> | |
| <option value="AL">Canada</option> | |
| <option value="DZ">India</option> | |
| <option value="AS">Russia</option> | |
| <option value="AD">USA</option> | |
| </select></li> | |
| <li><label for="zip">ZIP Code:</label></li> | |
| <li><input type="text" name="zip" /></li> | |
| <li><label for="email">Email:</label></li> | |
| <li><input type="text" name="email" size="50" /></li> | |
| <li><label id="gender">Sex:</label></li> | |
| <li><input type="radio" name="msex" value="Male" /><span>Male</span></li> | |
| <li><input type="radio" name="fsex" value="Female" /><span>Female</span></li> | |
| <li><label>Language:</label></li> | |
| <li><input type="checkbox" name="en" value="en" checked /><span>English</span></li> | |
| <li><input type="checkbox" name="nonen" value="noen" /><span>Non English</span></li> | |
| <li><label for="desc">About:</label></li> | |
| <li><textarea name="desc" id="desc"></textarea></li> | |
| <li><input type="submit" name="submit" value="Submit" /></li> | |
| </ul> | |
| </form> | |
| </body> | |
| </html> |
Wednesday, 14 November 2018
Subscribe to:
Comments (Atom)