Form using javascript inline validation

Hi all,
i have created a simple login form with 5 fields namely username,email id,password,retype password and phone no using inline validation.
after entering fields for username,email id and password and when clicking the submit button it should ask for retype your password and after entering value for retype password only it should display whether passwords are matching or not
but instead it is showing passwords are not matching before entering value for retype password only…
kindly check my code whats gone wrong and correct it please…
also my cursor should move from one textbox to another instead it is going directly to lastfield(phoneno) field…
below is my code…


<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">

 function checkName(form)
{
  var eobj=document.getElementById('realnameerror');
  var sRealName = form.realname.value;
  var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
  var error=false;
  eobj.innerHTML='';
  if (sRealName == '') {
   error='Error: Username cannot be blank!';
   form.realname.focus();
  }
  else if (sRealName.length < 4)
{
    error="UserName should be atleast 4 characters long";
  }
  else if (!oRE.test(sRealName))
{
   error="Incorrect format.";
  }
  if (error)
{
   form.realname.focus();
   eobj.innerHTML=error;
   return false;
  }
  return true;
 }

function checkEmail(form)          /* for email validation */
{
 var eobj=document.getElementById('emailerror');
 eobj.innerHTML='';
 if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
 {
  return true;
 }
 eobj.innerHTML='Invalid E-mail Address! Please re-enter.';
 return false;
}

function validatePwd(form)          /* password & retype-password verification */
{
 var eobj1=document.getElementById('passworderror');
 var eobj2=document.getElementById('password2error');
 var minLength=6;
 var invalid=' ';
 var pw1=form.password.value;
 var pw2=form.password2.value;
 var error=false;
 eobj1.innerHTML='';
 eobj2.innerHTML='';
 if (pw1.length<1)
 {
  error='Please enter your password.';
 }
 else if (pw1.length < minLength)
 {
  error='Your password must be at least ' + minLength + ' characters long. Try again.';
 }
 else if (pw1.indexOf(invalid) > -1)
 {
  error='Sorry, spaces are not allowed.';
 }
 if (error)
 {
  form.password.focus();
  eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2)
 {
  eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
  return false;
 }
 return true;
}

function validPhone(form)              /* phone no validation */
{
 var eobj=document.getElementById('phonenoerror');
 var valid = '0123456789';
 var phone = form.phoneno.value;
 var error=false;
 var i=0;
 var temp;
 eobj.innerHTML='';
 if (phone == '')
 {
  error='This field is required. Please enter phone number';
 }
 else if (!phone.length > 1 || phone.length < 10)
 {
  error='Invalid phone number length! Please try again.';
 }
 else
 {
  for (i=0; i < phone.length; i++)
 {
   temp = '' + phone.substring(i, i + 1);
   if (valid.indexOf(temp) == -1)
    {
    error='Invalid characters in your phone. Please try again.';
    }
  }
 }
 if (error)
 {
  form.phoneno.focus();
  eobj.innerHTML=error;
  return false;
 }
 return true;
}

function validate()
 {
 var form = document.forms['form'];
 var ary=[checkName,checkEmail,validatePwd,validPhone];
 var rtn=true;
 var z0=0;
 for (var z0=0;z0<ary.length;z0++)
{
  if (!ary[z0](form))
  {
    rtn=false;
  }
 }
 return rtn;
}
</script>
</head>
<body>

<form action="" method="post" name="form" onsubmit="return validate()">
   User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
    <br>
   E-Mail    : <input type="text" name="email" size="25"><span id="emailerror" ></span>
    <br>
   Password  : <input type="password" name="password" maxlength="12" size="25"><span id="passworderror" ></span>
    <br>
   Retype password: <input type="password" name="password2" maxlength="12" size="25"><span id="password2error" ></span>
    <br>
   PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25"><span id="phonenoerror" ></span>
    <br>
    <input type="submit" value="Submit">
</form>
</body>
</html>

Following is modified codes:


<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">

var hasFocus = false;

 function checkName(form)
{
  var eobj=document.getElementById('realnameerror');
  var sRealName = form.realname.value;
  var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
  var error=false;
  eobj.innerHTML='';
  if (sRealName == '') {
   error='Error: Username cannot be blank!';
  }
  else if (sRealName.length < 4)
{
    error="UserName should be atleast 4 characters long";
  }
  else if (!oRE.test(sRealName))
{
   error="Incorrect format.";
  }
  if (error)
{
   if (hasFocus == false) {
     form.realname.focus();
     hasFocus = true;
   }
   eobj.innerHTML=error;
   return false;
  }
  return true;
 }

function checkEmail(form)          /* for email validation */
{
 var eobj=document.getElementById('emailerror');
 eobj.innerHTML='';
 var error = false;
  if (form.email.value.length == 0) {
    error = 'Please enter email.';
  } else if (/^\\w+([\\.-]?\\w+)*@\\w+([\\.-]?\\w+)*(\\.\\w{2,3})+$/.test(form.email.value))
 {
  return true;
 } else {
   error = 'Invalid E-mail Address! Please re-enter.';
 }
 if (error) {
   eobj.innerHTML=error;
   if (!hasFocus) {
     form.email.focus();
     hasFocus = true;
   }
   return false;
 }

 return true;
}

function validatePwd(form)          /* password & retype-password verification */
{
 var eobj1=document.getElementById('passworderror');
 var eobj2=document.getElementById('password2error');
 var minLength=6;
 var invalid=' ';
 var pw1=form.password.value;
 var pw2=form.password2.value;
 var error=false;
 eobj1.innerHTML='';
 eobj2.innerHTML='';
 if (pw1.length<1)
 {
  error='Please enter your password.';
 }
 else if (pw1.length < minLength)
 {
  error='Your password must be at least ' + minLength + ' characters long. Try again.';
 }
 else if (pw1.indexOf(invalid) > -1)
 {
  error='Sorry, spaces are not allowed.';
 } else if (pw2.length == 0) {
  error='Please retype password.';
   if (!hasFocus) {
     form.password2.focus();
     hasFocus = true;
   }
  eobj2.innerHTML=error;
  return false;
 }
 if (error)
 {
   if (!hasFocus) {
     form.password.focus();
     hasFocus = true;
   }
    eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2)
 {
  eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
   if (!hasFocus) {
     form.password2.focus();
     hasFocus = true;
   }
  return false;
 }
 return true;
}

function validPhone(form)              /* phone no validation */
{
 var eobj=document.getElementById('phonenoerror');
 var valid = '0123456789';
 var phone = form.phoneno.value;
 var error=false;
 var i=0;
 var temp;
 eobj.innerHTML='';
 if (phone == '')
 {
  error='This field is required. Please enter phone number';
 }
 else if (!phone.length > 1 || phone.length < 10)
 {
  error='Invalid phone number length! Please try again.';
 }
 else
 {
  for (i=0; i < phone.length; i++)
 {
   temp = '' + phone.substring(i, i + 1);
   if (valid.indexOf(temp) == -1)
    {
    error='Invalid characters in your phone. Please try again.';
    }
  }
 }
 if (error)
 {
   if (!hasFocus) {
     form.phoneno.focus();
     hasFocus = true;
   }
  eobj.innerHTML=error;
  return false;
 }
 return true;
}

function validate()
 {
  hasFocus = false;
 var form = document.forms['form'];
 var ary=[checkName,checkEmail,validatePwd,validPhone];
 var rtn=true;
 var z0=0;
 for (var z0=0;z0<ary.length;z0++)
{
  if (!ary[z0](form))
  {
    rtn=false;
  }
 }
 return rtn;
}
</script>
</head>
<body>

<form action="" method="post" name="form" onsubmit="return validate()">
   User Name : <input type="text" name="realname" size="19"><span id="realnameerror" ></span>
    <br>
   E-Mail    : <input type="text" name="email" size="25"><span id="emailerror" ></span>
    <br>
   Password  : <input type="password" name="password" maxlength="12" size="25"><span id="passworderror" ></span>
    <br>
   Retype password: <input type="password" name="password2" maxlength="12" size="25"><span id="password2error" ></span>
    <br>
   PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25"><span id="phonenoerror" ></span>
    <br>
    <input type="submit" value="Submit">
</form>
</body>
</html>

@dthoai: I know you are still quite new to the forums but could you explain the changes you made as just updating a script won’t help the user to understand what the problem was.

I added a flag hasFocus and check if field is already focused or not when error is found:


..........................
<script type="text/javascript">

[COLOR="red"]var hasFocus = false;[/COLOR]

 function checkName(form)
{
  var eobj=document.getElementById('realnameerror');
  var sRealName = form.realname.value;
  var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
  var error=false;
  eobj.innerHTML='';
  if (sRealName == '') {
   error='Error: Username cannot be blank!';
  }
  else if (sRealName.length < 4) 
{
    error="UserName should be atleast 4 characters long";
  }
  else if (!oRE.test(sRealName))
{
   error="Incorrect format.";
  }
  if (error)
{
[COLOR="red"]   if (hasFocus == false) {
     form.realname.focus();
     hasFocus = true;
   } 
[/COLOR]   eobj.innerHTML=error;
   return false;
  }
  return true;
 }
.........

I added checking statement for blank re-type password:


function validatePwd(form)          /* password & retype-password verification */
{       
 var eobj1=document.getElementById('passworderror');
 var eobj2=document.getElementById('password2error');
 var minLength=6;
 var invalid=' ';
 var pw1=form.password.value;
 var pw2=form.password2.value;
 var error=false;
 eobj1.innerHTML='';
 eobj2.innerHTML='';
 if (pw1.length<1)
 {
  error='Please enter your password.';
 }
 else if (pw1.length < minLength)
 {
  error='Your password must be at least ' + minLength + ' characters long. Try again.';
 }
 else if (pw1.indexOf(invalid) > -1)
 {
  error='Sorry, spaces are not allowed.';
 [COLOR="red"]} else if (pw2.length == 0) {
  error='Please retype password.';
   if (!hasFocus) {
     form.password2.focus();
     hasFocus = true;
   } 
  eobj2.innerHTML=error;
  return false;
 }[/COLOR]
 if (error)
 {
   if (!hasFocus) {
     form.password.focus();
     hasFocus = true;
   } 
    eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2)
 {
  eobj2.innerHTML=' passwords not matching.Please re-enter your password.';
   if (!hasFocus) {
     form.password2.focus();
     hasFocus = true;
   } 
  return false;
 }
 return true;
}

Thank you dthoai