Inline form validation

JavaScript
1

Hi all,
i have created one simple login form with 5 fields namely username,email id,password,retype password and phone no.i have created alert message for each function,so that when there is an error it displays alert message…
now i have to replace all alert messages with inline validation(displays errors beside textbox)…
kindly 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 sRealname = form.realname.value;
var oRE = /[1]+[_.-]?[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 &lt; 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 &lt; minLength)
    {
        alert('Your password must be at least ' + minLength + ' characters long. Try again.');
        return false;
    }                                                                              
    
    if (document.form.password.value.indexOf(invalid) &gt; -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 &gt; 1 || phone.length &lt; 10)
    {
        alert('Invalid phone number length! Please try again.');
        return false;
    }
    
    for (var i = 0; i &lt; 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>
/code

  1. a-z0-9 ↩︎