form inline validation

**ravi951** · 07-26-2011, 06:51 AM

Hi all,
i have created one simple login form with 5 fields namely username,email id,password and retype password and phone no.i have created one alert message for each function so that when there is an error an alert message is displayed ..
now i want to replace an alert message with inline validation(displays error beside textbox)...
kindly tell me how to do that..
below is the code i have written........

Code:

<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
   function checkName(form)
 {
    var sRealname = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealname);
    
    if (!isCorrectFormat)
    {
        alert("Incorrect format.");
        textbox.select();
        textbox.focus();
        return false;
    }
    else
    {
        alert("Correct format");
        return true;
    }
    
    if (sRealName == '')
    {
        alert('Error: Username cannot be blank!');
        form.realname.focus();
        return false;
    }
    else if (sRealName.length < 4)
    {
        alert("UserName should be atleast 4 characters long");
        return false;
    }
    
    return true;
 }
    
    function checkEmail(form)   /* for email validation */
    {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
        {
            return true;
        }
        
         alert('Invalid E-mail Address! Please re-enter.'); 
         return false;
    }
    
    function validatePwd(form)       /* password & retype-password verification */
    {
        var invalid = ' '; 
        minLength = 6;
        var pw1 = form.password.value; 
        var pw2 = form.password2.value;
        
         
        if (pw1 == '' || pw2 == '')
        {
            alert('Please enter your password twice.');
            return false;
        }                                              
        
       
        if (form.password.value.length < minLength)
        {
            alert('Your password must be at least ' + minLength + ' characters long. Try again.');
            return false;
        }                                                                              
        
        if (document.form.password.value.indexOf(invalid) > -1)
        {
            alert('Sorry, spaces are not allowed.');
            return false;
        }
        else
        {
            if (pw1 != pw2)
            {
                alert('You did not enter the same new password twice. Please re-enter your password.');
                return false;
               }
            else
             {
                alert('Passwords Match.');
                   return false;
             } 
                                                                                                       
            return false;                                                                    
        }
    }  
    
    function validPhone(form)          /* phone no validation */
    {
        var valid = '0123456789'; 
        phone = form.phoneno.value;
        
        if (phone == '')
        {
            alert('This field is required. Please enter phone number');
            return false;
        }
        
        if (!phone.length > 1 || phone.length < 10)
        {
            alert('Invalid phone number length! Please try again.');
            return false;
        }
        
        for (var i = 0; i < phone.length; i++)
        {
            temp = '' + phone.substring(i, i + 1);
            
            if (valid.indexOf(temp) == -1)
            {
                alert('Invalid characters in your phone. Please try again.');
                return false;
            }
        }
        
        return true;
    }
    
    function validate()
    {
        var form = document.forms['form'];
        
        if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
        {
            return false;
        }
        
        return true;
    }
</script>
</head>
<body>
 
<form action="" method="post" name="form" onsubmit="return validate()">
    User Name : <input type="text" name="realname" size="19">
    <br>
    E-Mail    : <input type="text" name="email" size="25">
    <br>
    Password  : <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
</form>
 </body>
</html>

**vwphillips** · 07-26-2011, 11:18 AM

I corrected and modified function checkName, I will let you do the rest

Code:

<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
   function checkName(form)
 {
   var eobj=   document.getElementById('realnameerror');
   eobj.innerHTML='';
   var sRealName = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealName);
    var error=false;
    if (!isCorrectFormat)
    {
        error="Incorrect format.";
        form.realname.select();
        form.realname.focus();
    }

    else if (sRealName == '')
    {
        error='Error: Username cannot be blank!';
        form.realname.focus();
    }
    else if (sRealName.length < 4)
    {
        error="UserName should be atleast 4 characters long";
    }
    if (error){
     eobj.innerHTML=error;
     return false
    }
    return true;
 }

    function checkEmail(form)   /* for email validation */
    {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
        {
            return true;
        }

         alert('Invalid E-mail Address! Please re-enter.');
         return false;
    }

    function validatePwd(form)       /* password & retype-password verification */
    {
        var invalid = ' ';
        minLength = 6;
        var pw1 = form.password.value;
        var pw2 = form.password2.value;


        if (pw1 == '' || pw2 == '')
        {
            alert('Please enter your password twice.');
            return false;
        }


        if (form.password.value.length < minLength)
        {
            alert('Your password must be at least ' + minLength + ' characters long. Try again.');
            return false;
        }

        if (document.form.password.value.indexOf(invalid) > -1)
        {
            alert('Sorry, spaces are not allowed.');
            return false;
        }
        else
        {
            if (pw1 != pw2)
            {
                alert('You did not enter the same new password twice. Please re-enter your password.');
                return false;
               }
            else
             {
                alert('Passwords Match.');
                   return false;
             }

            return false;
        }
    }

    function validPhone(form)          /* phone no validation */
    {
        var valid = '0123456789';
        phone = form.phoneno.value;

        if (phone == '')
        {
            alert('This field is required. Please enter phone number');
            return false;
        }

        if (!phone.length > 1 || phone.length < 10)
        {
            alert('Invalid phone number length! Please try again.');
            return false;
        }

        for (var i = 0; i < phone.length; i++)
        {
            temp = '' + phone.substring(i, i + 1);

            if (valid.indexOf(temp) == -1)
            {
                alert('Invalid characters in your phone. Please try again.');
                return false;
            }
        }

        return true;
    }

    function validate() {
        var form = document.forms['form'];

        if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
        {
            return false;
        }

        return true;
    }
</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">
    <br>
    Password  : <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
</form>
 </body>
</html>

**ravi951** · 07-26-2011, 11:23 AM

Please tell me in brief,what changes u have done for checkName function which is displaying as inline validation....

**ravi951** · 07-28-2011, 09:03 AM

hi all,
below is the code for simple login form having fields username,email id,password,retype password and phone no. i have done inline validation for
checkName() .i am not getting for the other fields can u tell me how to do it..

Code:

<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
   function checkName(form)
 {
   var eobj=document.getElementById('realnameerror');
   eobj.innerHTML='';
   var sRealName = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealName);
    var error=false;
    if (!isCorrectFormat)
    {
        error="Incorrect format.";
        form.realname.select();
        form.realname.focus();
    }

    else if (sRealName == '')
    {
        error='Error: Username cannot be blank!';
        form.realname.focus();
    }
    else if (sRealName.length < 4)
    {
        error="UserName should be atleast 4 characters long";
    }
    if (error){
     eobj.innerHTML=error;
     return false
    }
    return true;
 }

    function checkEmail(form)   /* for email validation */
    {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
        {
            return true;
        }

         alert('Invalid E-mail Address! Please re-enter.');
         return false;
    }

    function validatePwd(form)       /* password & retype-password verification */
    {
        var invalid = ' ';
        minLength = 6;
        var pw1 = form.password.value;
        var pw2 = form.password2.value;


        if (pw1 == '' || pw2 == '')
        {
            alert('Please enter your password twice.');
            return false;
        }


        if (form.password.value.length < minLength)
        {
            alert('Your password must be at least ' + minLength + ' characters long. Try again.');
            return false;
        }

        if (document.form.password.value.indexOf(invalid) > -1)
        {
            alert('Sorry, spaces are not allowed.');
            return false;
        }
        else
        {
            if (pw1 != pw2)
            {
                alert('You did not enter the same new password twice. Please re-enter your password.');
                return false;
               }
            else
             {
                alert('Passwords Match.');
                   return false;
             }

            return false;
        }
    }

    function validPhone(form)          /* phone no validation */
    {
        var valid = '0123456789';
        phone = form.phoneno.value;

        if (phone == '')
        {
            alert('This field is required. Please enter phone number');
            return false;
        }

        if (!phone.length > 1 || phone.length < 10)
        {
            alert('Invalid phone number length! Please try again.');
            return false;
        }

        for (var i = 0; i < phone.length; i++)
        {
            temp = '' + phone.substring(i, i + 1);

            if (valid.indexOf(temp) == -1)
            {
                alert('Invalid characters in your phone. Please try again.');
                return false;
            }
        }

        return true;
    }

    function validate() {
        var form = document.forms['form'];

        if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
        {
            return false;
        }

        return true;
    }
</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">
    <br>
    Password  : <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
</form>
 </body>
</html>

**ravi951** · 07-28-2011, 11:17 AM

Originally Posted by vwphillips

I corrected and modified function checkName, I will let you do the rest

Code:

<html>
<head>
<meta charset="utf-8">
<title>Validation using JavaScript</title>
<script type="text/javascript">
   function checkName(form)
 {
   var eobj=   document.getElementById('realnameerror');
   eobj.innerHTML='';
   var sRealName = form.realname.value;
    var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
    var isCorrectFormat = oRE.test(sRealName);
    var error=false;
    if (!isCorrectFormat)
    {
        error="Incorrect format.";
        form.realname.select();
        form.realname.focus();
    }

    else if (sRealName == '')
    {
        error='Error: Username cannot be blank!';
        form.realname.focus();
    }
    else if (sRealName.length < 4)
    {
        error="UserName should be atleast 4 characters long";
    }
    if (error){
     eobj.innerHTML=error;
     return false
    }
    return true;
 }

    function checkEmail(form)   /* for email validation */
    {
        if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value))
        {
            return true;
        }

         alert('Invalid E-mail Address! Please re-enter.');
         return false;
    }

    function validatePwd(form)       /* password & retype-password verification */
    {
        var invalid = ' ';
        minLength = 6;
        var pw1 = form.password.value;
        var pw2 = form.password2.value;


        if (pw1 == '' || pw2 == '')
        {
            alert('Please enter your password twice.');
            return false;
        }


        if (form.password.value.length < minLength)
        {
            alert('Your password must be at least ' + minLength + ' characters long. Try again.');
            return false;
        }

        if (document.form.password.value.indexOf(invalid) > -1)
        {
            alert('Sorry, spaces are not allowed.');
            return false;
        }
        else
        {
            if (pw1 != pw2)
            {
                alert('You did not enter the same new password twice. Please re-enter your password.');
                return false;
               }
            else
             {
                alert('Passwords Match.');
                   return false;
             }

            return false;
        }
    }

    function validPhone(form)          /* phone no validation */
    {
        var valid = '0123456789';
        phone = form.phoneno.value;

        if (phone == '')
        {
            alert('This field is required. Please enter phone number');
            return false;
        }

        if (!phone.length > 1 || phone.length < 10)
        {
            alert('Invalid phone number length! Please try again.');
            return false;
        }

        for (var i = 0; i < phone.length; i++)
        {
            temp = '' + phone.substring(i, i + 1);

            if (valid.indexOf(temp) == -1)
            {
                alert('Invalid characters in your phone. Please try again.');
                return false;
            }
        }

        return true;
    }

    function validate() {
        var form = document.forms['form'];

        if (!checkName(form) || !checkEmail(form) || !validatePwd(form) || !validPhone(form))
        {
            return false;
        }

        return true;
    }
</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">
    <br>
    Password  : <input type="password" name="password" maxlength="12" size="25">
    <br>
    Retype password: <input type="password" name="password2" maxlength="12" size="25">
    <br>
    PhoneNo   : <input type="phoneno" name="phoneno" maxlength="10" size="25">
    <br>
    <input type="submit" value="Submit">
</form>
 </body>
</html>

hi i have not getting for password and retype password field...
can u tell me how to do it........

**vwphillips** · 07-28-2011, 01:21 PM

Code:

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

 function checkName(form){
  var eobj=document.getElementById('realnameerror'),sRealName = form.realname.value,oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i,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'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password.value,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){
  eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2){
  eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
  return false;
 }
 return true;
}

function validPhone(form){          /* phone no validation */
 var eobj=document.getElementById('phonenoerror'),valid = '0123456789',phone = form.phoneno.value,error=false,i=0,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 < 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'],ary=[checkName,checkEmail,validatePwd,validPhone],rtn=true,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>

**ravi951** · 07-29-2011, 04:21 AM

hi,
the script is working fine with username and email id but when i enter input for password field and clicking the submit button it is not asking for re enter password but showing error message for phone no field.
why it is not showing for retype password field....

**vwphillips** · 07-29-2011, 06:57 AM

Code:

function validatePwd(form){       /* password & retype-password verification */
 var eobj1=document.getElementById('passworderror'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password2.value,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){
  eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2){
  eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
  return false;
 }
 return true;
}

**ravi951** · 07-29-2011, 07:12 AM

hi,
when i enter value for first field i.e., username as ravi and click the submit button then cursor is moving to the last field i.e.,phone no field.
the cursor is not moving continuous.....

**ravi951** · 07-29-2011, 08:45 AM

Originally Posted by vwphillips

Code:

function validatePwd(form){       /* password & retype-password verification */
 var eobj1=document.getElementById('passworderror'),eobj2=document.getElementById('password2error'),minLength=6,invalid=' ',pw1=form.password.value,pw2=form.password2.value,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){
  eobj1.innerHTML=error;
  return false
 }
 if (pw1 != pw2){
  eobj2.innerHTML='You did not enter the same new password twice. Please re-enter your password.';
  return false;
 }
 return true;
}

hi
after entering values for username,email id and password and clicking the submit button it is displaying the message passwords are not matching. but instead it should ask for please reenter ur password and then it should check whether both passwords and retype passwords are matching or not...
can u tell me how to do it...

Thread: form inline validation

Thread Tools

Search Thread

form inline validation

reply

inline form validation

reply

reply

reply

Bookmarks

Bookmarks

Posting Permissions