Remove error message after validation

Question

I have used a jquery validation to validate my form. I am displaying one error message and my problem is that when user hits the submit button the message is displayed but When all the fields have been filled out then error message does not disappear. I would like the error message to disappear when all fields have been filled correctly. Here is my form

   <div class="form-group">
        <div id="error-bubble" class=" col-xs-10 col-centered"  
   style="display:none;color:red;">Fields Marked Red Are Required</div>
    </div>
    <div class="form-group">
        <div class="col-xs-10 col-centered">
            <form:input type="text" class="form-control" id="inputEmail" placeholder="Your 
     Mob Email"  path="emailId" value="${user.emailId}" ></form:input>
        </div>
    </div>
    <div class="form-group">

        <div class="col-xs-10 col-centered">
            <form:input type="text" class="form-control " id="inputFullName" 
     placeholder="Full Name" path="fullName" name="fullName" value="${user.fullName}">
     </form:input>
        </div>
    </div>
    <div class="form-group">
        <div class=" col-xs-10 col-centered">
           <input type="submit" value="Update"/>
            <input type="reset" value="Cancel" />
        </div>
    </div>


 and my jquery is 



$( "#myform" ).validate({
  rules: {
      contactNo: {
      required: true,
      minlength: 8,
      maxlength:25
    },
    officeContactNo: {
          required: true,
          minlength: 8,
          maxlength:25
        },
    fullName:{
          required:true,
          minlength:1,
          maxlength:40
    },
    title:{
        required:true
    },
    reportTo:{
        required:true
    },
    officeLocation:{
        required:true
    }
      },
      errorPlacement: function () {

          $('#error-bubble').show();
        },
        submitHandler: function(form) {  
            if ($(form).valid()) {
                 $('#error-bubble').hide();
             form.submit();}
            return false; // prevent normal form posting
     }
});

possible duplicate of [jquery - validate characters on keypress?](http://stackoverflow.com/questions/2812585/jquery-validate-characters-on-keypress) — arjun, Oct 05 '14 at 08:56

score 2 · Answer 1 · answered Oct 05 '14 at 09:21

2

Check this Fiddle

It also handles copy/paste by validating keypress with keyup

Trying entering any non-numeric character in the example.
This would get you started.

answered Oct 05 '14 at 09:21

arjun

1,594
16
33

This is what I want but I want this for all my fields.. I mean since I am displaying only one message on top therefore when all the fields have been filled in my form i want it to be removed automatically. How can I achieve that that was the question – Abhinav Pandey Oct 05 '14 at 09:23
I cant develop the complete form for you. Study the code. Its fairly simple. You just have to include it for all your inputs and have the notification unified in one place. But be cautioned. Javascript is not a replacement for your server-side validation. – arjun Oct 05 '14 at 09:28

Sameer Shemna · Answer 2 · 2014-10-05T09:55:47.433

1

Hey Abhinav I guess you are using the jQuery validation plugin,

try adding the following properties to .validate():

onfocusout: true,
onkeyup: true,

you can even use functions here in 'onkeyup' event like:

onkeyup: function(element, event){
    if ($(form).valid()) { $('#error-bubble').hide(); 
    form.submit(); 
}

or

Try using the button click event instead:

$( '#myform input[type="submit"]' ).click(function() {
  if ($(form).valid()) { $('#error-bubble').hide(); 
  form.submit(); 
});

these will check your validations again on keyboard events, i guess thats what you are looking for

edited Oct 05 '14 at 09:55

answered Oct 05 '14 at 08:56

Sameer Shemna

886
10
19

I have put a hidden error div which show when the validation fails. What I am trying to achieve is when all my validations fields are filled the error message to be removed. See the error placement in my validation above. I want that div to be hidden. – Abhinav Pandey Oct 05 '14 at 09:11
Try using the button click event instead: $( '#myform input[type="submit"]' ).click(function() { if ($(form).valid()) { $('#error-bubble').hide(); form.submit(); }); – Sameer Shemna Oct 05 '14 at 09:32
I have done that but this removes the error on submit.. I wanted it to be removed as soon as all my form fields have been filled. – Abhinav Pandey Oct 05 '14 at 09:51

Remove error message after validation

2 Answers2