There are two codes given (html and external javascript):
- HTML code
|
|
|
|
|
|
JavaScript Validation Registration from |
|
Registration Form
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 <>
{
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.