There are two codes given (html and external javascript): HTML code JavaScript Validation Registration from Registration Form User id Password Name Address Country ZIP Code Email Sex Male Female Language preference English Non English Write about yourself (optional) 2. External JavaScript Code function formValidation() { var uid = document.form1.userid; var passid = document.form1.passid; var uname = document.form1.username; var uadd = document.form1.address; var ucountry = document.form1.country; var uzip = document.form1.zip; var uemail = document.form1.email; var umsex = document.form1.msex; var ufsex = document.form1.fsex; if(userid_validation(uid,5,12)) { if(allnumeric(uid)) { if(userid_validation(passid,7,12)) { if(allLetter(uname)) { if(alphanumeric(uadd)) { if(countryselect(ucountry)) { if(allnumeric(uzip)) { if(ValidateEmail(uemail)) { if(validsex(umsex,ufsex)) { alert('Good Luck. Your form is submitted successfully'); } } } } } } } } } 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("This field should not be empty/length be between "+mx+" to "+my); uid.focus(); return false; } return true; } function allLetter(uname) { var letters = /^[A-Za-z]+$/; if(uname.value.match(letters)) { return true; } else { alert('Please input 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('Please input alphanumeric characters only'); uadd.focus(); return false; } } function countryselect(ucountry) { if(ucountry.value == "PS") { 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('Please input 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 { return true; } } There are validation checks imposed for each input box Modify the code for the below actions, Use "onKeyup" event, which will validate every input box separately. meaning that, if the user enters wrong data in the user id box, a message box or some red color text should be displayed as "Enter the valid id", and the focus should stay on the same input put box, and same for all the input boxes. Attention: Modify/write your validation code in the "my-form-validation.js" file.
There are two codes given (html and external javascript):
- HTML code
| <html> | |
| <head> | |
| <title>JavaScript Validation Registration from</title> | |
| <h2>Registration Form</h2> | |
| <script src="my-form-validation.js"></script> | |
| </head> | |
| <body onload="document.form1.userid.focus();"> | |
| <form name='form1' onsubmit='formValidation()' > | |
| <table width="500" cellpadding="3" style="border-collapse: collapse;"> | |
| <tr> | |
| <td>User id </td> | |
| <td><input type="text" name="userid" size="12" /></td> | |
| </tr> | |
| <tr> | |
| <td>Password</td> | |
| <td><input type="password" name="passid" size="12" /></td> | |
| </tr> | |
| <tr> | |
| <td>Name</td> | |
| <td><input type="text" name="username" size="50" /></td> | |
| </tr> | |
| <tr> | |
| <td>Address</td> | |
| <td><input type="text" name="address" size="50" /></td> | |
| </tr> | |
| <tr> | |
| <td>Country</td> | |
| <td><select id="country" name="country"> | |
| <option selected="" value="PS">(Please select a country)</option> | |
| <option value="--">none</option> | |
| <option value="PK">Russia</option> | |
| <option value="KY">Australia</option> | |
| <option value="TJ">India</option> | |
| <option value="KZ">USA</option> | |
| <option value="AF">Britain</option> | |
| </select></td> | |
| </tr> | |
| <tr> | |
| <td>ZIP Code </td> | |
| <td><input type="text" name="zip" /></td> | |
| </tr> | |
| <tr> | |
| <td>Email</td> | |
| <td><input type="text" name="email" size="50" /></td> | |
| </tr> | |
| <tr> | |
| <td>Sex</td> | |
| <td><input type="radio" name="msex" value="Male" /> Male | |
| <input type="radio" name="fsex" value="Female" /> Female</td> | |
| </tr> | |
| <tr> | |
| <td>Language preference</td> | |
| <td><input type="checkbox" name="en" value="en" checked />English | |
| <input type="checkbox" name="nonen" value="noen" />Non English</td> | |
| </tr> | |
| <tr> | |
| <td>Write about yourself<br> | |
| (optional)</td> | |
| <td><textarea name="desc" rows="4" cols="40"></textarea></td> | |
| </tr> | |
| <tr> | |
| <td> </td> | |
| <td><input type="submit" name="submit" value="Submit" /></td> | |
| <td> </td> | |
| </tr> | |
| </table> | |
| </form> | |
| </body> | |
| </html> |
2. External JavaScript Code
function formValidation()
{
var uid = document.form1.userid;
var passid = document.form1.passid;
var uname = document.form1.username;
var uadd = document.form1.address;
var ucountry = document.form1.country;
var uzip = document.form1.zip;
var uemail = document.form1.email;
var umsex = document.form1.msex;
var ufsex = document.form1.fsex;
if(userid_validation(uid,5,12))
{
if(allnumeric(uid))
{
if(userid_validation(passid,7,12))
{
if(allLetter(uname))
{
if(alphanumeric(uadd))
{
if(countryselect(ucountry))
{
if(allnumeric(uzip))
{
if(ValidateEmail(uemail))
{
if(validsex(umsex,ufsex))
{
alert('Good Luck. Your form is submitted successfully');
}
}
}
}
}
}
}
}
}
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("This field should not be empty/length be between "+mx+" to "+my);
uid.focus();
return false;
}
return true;
}
function allLetter(uname)
{
var letters = /^[A-Za-z]+$/;
if(uname.value.match(letters))
{
return true;
}
else
{
alert('Please input 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('Please input alphanumeric characters only');
uadd.focus();
return false;
}
}
function countryselect(ucountry)
{
if(ucountry.value == "PS")
{
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('Please input 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
{
return true;
}
}
There are validation checks imposed for each input box
Modify the code for the below actions,
Use "onKeyup" event, which will validate every input box separately. meaning that, if the user enters wrong data in the user id box, a message box or some red color text should be displayed as "Enter the valid id", and the focus should stay on the same input put box, and same for all the input boxes.
Attention: Modify/write your validation code in the "my-form-validation.js" file.
Step by step
Solved in 2 steps with 10 images
