Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    form using inline validation

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

    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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Display your error message in a <span> positioned next to the textbox. You can use css to style the displayed text. Hide the message again when focus is placed on the input textbox.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reply

    can you show me for one function so that i can do it for rest of the functions.....

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,079
    Thanks
    203
    Thanked 2,542 Times in 2,520 Posts
    Example:-

    Code:
    function checkName(form) {
    document.getElementById("Span1").style.display="none"; // clear the previous message
        var sRealname = form.realname.value;
        var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i;
        var isCorrectFormat = oRE.test(sRealname);
        
        if (!isCorrectFormat)  {
    document.getElementById("span1").style.display="";  // display the message inline
    document.getElementById("span1").innerHTML = "&nbsp&nbspIncorrect Format!";
            form.realname.select();
            form.realname.focus();
            return false;
        }
        else   {   
    document.getElementById("Span1").style.display="none"; // clear the previous message
            return true;
        }
    and the HTML

    Code:
    User Name : <input type="text" name="realname" size="19"><span id = "span1" style="display:none"></span>
    You can style the message text (font size,color etc) using css.

    Note that this section of your code will never be executed:-

    Code:
        if (sRealName == '')
        {
            alert('Error: Username cannot be blank!');
            form.realname.focus();
            return false;
        }
        else if (sRealName.length < 4)
        {
            alert("UserName should be at least 4 characters long");
            return false;
        }
        
        return true;
     }
    as above validation returns true if the format is correct.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    reply

    you are telling me that if sRealName is blank or not filled or sRealName length is less than 4 characters it will never execute..
    if i deliberately give sRealName a 3 characters it must display an error
    or if ignore sRealName value it must also display an error..
    then what to do to execute these......

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Posts
    117
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Try this form validation script. You can show inline error messages


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •