how to show error messages below the textbox in javascript validation?

Today, We want to share with you how to show error messages below the textbox in javascript validation.In this post we will show you javascript form validation showing error message next to input, hear for javascript form validation with all error messages at once we will give you demo and example for implement.In this post, we will learn about how to display error message in javascript without alert with an example.

how to display error message beside textbox using javascript?

HTML Code

    	
Sign In

    

        

            

                E-mail address
            
            

                
            
            

                Password
            
            

                
            
            
            

                
            
        
    

JavaScript Code

    $('form').on('submit', function (e) {
        var focusSet = false;
        if (!$('#customer_email_address').val()) {
            if ($("#customer_email_address").parent().next(".validation").length == 0) // only add if not added
            {
                $("#customer_email_address").parent().after("
Please enter customer_email_address address
");
            }
            e.preventDefault(); // prevent form from POST to server
            $('#customer_email_address').focus();
            focusSet = true;
        } else {
            $("#customer_email_address").parent().next(".validation").remove(); // remove it
        }
        if (!$('#user_password_input').val()) {
            if ($("#user_password_input").parent().next(".validation").length == 0) // only add if not added
            {
                $("#user_password_input").parent().after("
Please enter password
");
            }
            e.preventDefault(); // prevent form from POST to server
            if (!focusSet) {
                $("#user_password_input").focus();
            }
        } else {
            $("#user_password_input").parent().next(".validation").remove(); // remove it
        }
    });

CSS Code

@charset"utf-8";


 @import url(http://weloveiconfonts.com/api/?family=fontawesome);
 @import url(http://meyerweb.com/eric/tools/css/reset/reset.css);

[class*="fontawesome-"]:before {
    font-family:'FontAwesome', sans-serif;
}

 body {
    background-color: #C0C0C0;
    color: #000;
    font-family:"Varela Round", Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
}
input {
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    -webkit-appearance: none;
}

 #form_signin {
    margin: 50px auto;
    width: 400px;
}
#form_signin h2 {
    background-color: #f95252;
    -webkit-border-radius: 20px 20px 0 0;
    -moz-border-radius: 20px 20px 0 0;
    border-radius: 20px 20px 0 0;
    color: #fff;
    font-size: 28px;
    padding: 20px 26px;
}
#form_signin h2 span[class*="fontawesome-"] {
    margin-right: 14px;
}
#form_signin fieldset {
    background-color: #fff;
    -webkit-border-radius: 0 0 20px 20px;
    -moz-border-radius: 0 0 20px 20px;
    border-radius: 0 0 20px 20px;
    padding: 20px 26px;
}
#form_signin fieldset p {
    color: #777;
    margin-bottom: 14px;
}
#form_signin fieldset p:last-child {
    margin-bottom: 0;
}
#form_signin fieldset input {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
#form_signin fieldset input[type="email"], #form_signin fieldset input[type="password"] {
    background-color: #eee;
    color: #777;
    padding: 4px 10px;
    width: 328px;
}
#form_signin fieldset input[type="submit"] {
    background-color: #33cc77;
    color: #fff;
    display: block;
    margin: 0 auto;
    padding: 4px 0;
    width: 100px;
}
#form_signin fieldset input[type="submit"]:hover {
    background-color: #28ad63;
}

I hope you get an idea about display error message below input field using jquery.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.