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.

Free Live Chat for Any Issue

how to display error message beside textbox using javascript?

HTML Code

<div id="form_signin">
    	<h2><span class="fontawesome-lock"></span>Sign In</h2>

    <form action="javascript:alert('FORM SUBMITTED');" method="POST">
        <fieldset>
            <p>
                <label for="customer_email_address">E-mail address</label>
            </p>
            <p>
                <input type="email" id="customer_email_address">
            </p>
            <p>
                <label for="password">Password</label>
            </p>
            <p>
                <input type="password" id="user_password_input">
            </p>
            <!-- JS because of IE support; better: placeholder="Email" -->
            <p>
                <input type="submit" value="Sign In">
            </p>
        </fieldset>
    </form>
</div>
<!-- end form_signin -->

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("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter customer_email_address address</div>");
            }
            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("<div class='validation' style='color:red;margin-bottom: 20px;'>Please enter password</div>");
            }
            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;
}

Download

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.