How to show validation message below each textbox using jquery

Question

I am trying to make a login form in which I have email address and password as the textbox  I have done the validation on the email address part so that it should have proper email address and also on the empty check both for email address and password text box   Here is my jsfiddle   As of now  I have added an alert box saying  Invalid if email address and password textbox is empty  Instead of that  I would like to show a simple message just below each text box saying   please enter your email address or password if they are empty   Just like it has been done here on sitepoint blog    Is this possible to do in my current html form   Update -   lt body gt        lt div id  login  gt            lt h2 gt               lt span class  fontawesome-lock  gt  lt  span gt Sign In          lt  h2 gt            lt form action  login  method  POST  gt               lt fieldset gt                   lt p gt                       lt label for  email  gt E-mail address lt  label gt                   lt  p gt                   lt p gt                       lt input type  email  id  email  name  email  gt                   lt  p gt                   lt p gt                       lt label for  password  gt Password lt  label gt                   lt  p gt                   lt p gt                       lt input type  password  name  password  id  password  gt                   lt  p gt                   lt p gt                       lt input type  submit  value  Sign In  gt                   lt  p gt                lt  fieldset gt            lt  form gt        lt  div gt       lt  -- end login -- gt    lt  body gt    And my js -    lt script gt        document  ready function                form   on  submit   function  e                e preventDefault                 if       email   val                      if      email   parent   next   validation   length    0     only add if not added                                           email   parent   after   lt div class  validation  style  color red margin-bottom  20px   gt Please enter email address lt  div gt                                     else                       email   parent   next   validation   remove       remove it                           if       password   val                      if      password   parent   next   validation   length    0     only add if not added                                           password   parent   after   lt div class  validation  style  color red margin-bottom  20px   gt Please enter password lt  div gt                                      else                       password   parent   next   validation   remove       remove it                                      lt  script gt    I am working with JSP and Servlets so as soon as I click Sign In button  it was taking me to another page with valid email and password earlier but now nothing is happening after I click Sign In button with valid email and password    Any thoughts what could be wrong

User · Answer

This is the simple solution may work for you.

Check this solution

$('form').on('submit', function (e) {
e.preventDefault();
var emailBox=$("#email");
var passBox=$("#password");
if (!emailBox.val() || !passBox.val()) {
    $(".validationText").text("Please Enter Value").show();
}
else if(!IsEmail(emailBox.val()))
{
    emailBox.prev().text("Invalid E-mail").show();
}
$("input#email, input#password").focus(function(){
    $(this).prev(".validationText").hide();
});});

User · Answer

The way I would do it is to create paragraph tags where you want your error messages with the same class and show them when the data is invalid  Here is my fiddle  if      email   val                 password   val                    loginError   show        return false      I also added the paragraph tags below the email and password inputs   lt p class  loginError  style  display none   gt please enter your email address or password  lt  p gt

User · Answer

Here you go   JS      form   on  submit   function  e        e preventDefault         if       email   val                 email   parent   append   lt span class  error  gt Please enter your email address  lt  span gt           if      password   val                 password   parent   append   lt span class  error  gt Please enter your password  lt  span gt           CSS    charset  utf-8      CSS Document        ---------- FONTAWESOME ----------       ---------- http   fortawesome github com Font-Awesome  ----------       ---------- http   weloveiconfonts com  ----------      import url http   weloveiconfonts com api  family fontawesome       ---------- ERIC MEYER S RESET CSS ----------       ---------- http   meyerweb com eric tools css reset  ----------      import url http   meyerweb com eric tools css reset reset css       ---------- FONTAWESOME ----------      class   fontawesome-   before     font-family   FontAwesome   sans-serif        ---------- GENERAL ----------     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        ---------- LOGIN ----------      login       margin  50px auto      width  400px      login 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      login h2 span class   fontawesome-         margin-right  14px      login 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      login fieldset div       color   777      margin-bottom  14px      login fieldset p last-child       margin-bottom  0      login fieldset input       -webkit-border-radius  3px      -moz-border-radius  3px      border-radius  3px      login fieldset  error       display  block       color   FF1000      font-size  12px        login fieldset input type  email     login fieldset input type  password         background-color   eee      color   777      padding  4px 10px      width  328px      login fieldset input type  submit         background-color   33cc77      color   fff      display  block      margin  0 auto      padding  4px 0      width  100px      login fieldset input type  submit   hover       background-color   28ad63      HTML     lt div id  login  gt    lt h2 gt  lt span class  fontawesome-lock  gt  lt  span gt Sign In lt  h2 gt    lt form action  javascript void 0    method  POST  gt        lt fieldset gt            lt div gt  lt label for  email  gt E-mail address lt  label gt  lt  div gt           lt div gt  lt input type  email  id  email    gt  lt  div gt            lt div gt  lt label for  password  gt Password lt  label gt  lt  div gt           lt div gt  lt input type  password  id  password    gt  lt  div gt   lt  -- JS because of IE support  better  placeholder  Email  -- gt            lt div gt  lt input type  submit  value  Sign In  gt  lt  div gt        lt  fieldset gt    lt  form gt      And the fiddle  jsfiddle

User · Answer

You could put static elements after the fields and show them  or you could inject the validation message dynamically  See the below example for how to inject dynamically    This example also follows the best practice of setting focus to the blank field so user can easily correct the issue   Note that you could easily genericize this to work with any label  amp  field  for required fields anyway   instead of my example which specifically codes each validation   Your fiddle is updated  see here  jsfiddle  The code      form   on  submit   function  e        var focusSet   false      if       email   val              if      email   parent   next   validation   length    0     only add if not added                           email   parent   after   lt div class  validation  style  color red margin-bottom  20px   gt Please enter email address lt  div gt                       e preventDefault       prevent form from POST to server             email   focus            focusSet   true        else               email   parent   next   validation   remove       remove it           if       password   val              if      password   parent   next   validation   length    0     only add if not added                           password   parent   after   lt div class  validation  style  color red margin-bottom  20px   gt Please enter password lt  div gt                       e preventDefault       prevent form from POST to server         if   focusSet                    password   focus                    else               password   parent   next   validation   remove       remove it               The CSS        validation             color  red        margin-bottom  20px

User · Answer

is only the matter of finding the dom where you want to insert the the text    DEMO jsfiddle      text

[javascript] How to show validation message below each textbox using jquery?

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to css