Posted inJavaScript / jQuery / php

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

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.

I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

Leave a Reply

Your email address will not be published. Required fields are marked *

We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype