Jquery Validation - clear error message box when input has been corrected

Question

I'm using the jquery validation plus the plugin from bassistance.de, the validation errors are being shown in a specific area of the screen and not besides the invalid form element this is achieved by specifying an empty errorPlacement function in the valid() method.

<div id="errbox" style="display: none"></div><br />
<form id="myform" method="post" action="#">
 <fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
 </fieldset>
 <br />
 <input type="submit" value="Go" />            
</form>

I would like the error messages to disappear/clear whenever the input has been corrected and it's valid against the validation rules. This happens if I take out the errorPlacement code and leave the message appearing besides the invalid element, but it doesn't if I show the error messages in the designated box.

This is my js code

$("#myform").validate({
 messages: {
    firstName: {required: "Please enter your First Name"},
    lastName: {required: "Please enter your last name -
                          your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
 // This handler will show only one error at time - the first in this instance // 
       var errors = validator.numberOfInvalids();
       if (errors) {
             $("#errbox").html(validator.errorList[0].message);
             $("#errbox").show();
             validator.errorList[0].element.focus();
        } else {
             $("#errbox").hide();
        }
 },       
 errorPlacement: function(error, element) {
            // Override error placement to not show error messages beside elements //
 },    
});

You can try the code here: http://jsfiddle.net/E7yPf/

I've tried to explicitly declare the onKeyUp and onFocusOut property and set them to true but it had no effect.

Is there anybody here who can help or point me in the right direction?

Thanks

why cant you use jquery parsley it is more easy and we can have control in our hands — Jagadeesh, Feb 14 '14 at 13:38
Please don't "tag spam". The [tag:jquery-validation-engine] is a totally different plugin. — Sparky, Feb 14 '14 at 14:55

Sparky · Answer 1 · 2014-02-14T15:42:46.530

You misunderstand the invalidHandler callback. As per documentation, it only fires on submit click when the form is "invalid". In other words, your if (errors) conditional will never be seen when there are no errors so the else hide() can never be called.

Put hide() inside the success callback which is fired whenever a field passes validation. However, this exposes a flaw in your invalidHandler logic, where you won't see the other error messages after the first one is cleared. I'm not sure if that's the best thing to do, but that's what your comments indicate you want. You can adjust as needed.

$("#myform").validate({
    messages: {
        firstName: {
            required: "Please enter your First Name"
        },
        lastName: {
            required: "Please enter your last name - your maiden name if married"
        } // <- removed a trailing comma
    },
    invalidHandler: function (form, validator) {
        // This handler will show only one error at time - the first in this instance // 
        var errors = validator.numberOfInvalids();
        $("#errbox").html(validator.errorList[0].message);
        $("#errbox").show();
        validator.errorList[0].element.focus();
    },
    success: function () {
        $("#errbox").hide();
    },
    errorPlacement: function (error, element) {  // <- do not leave empty
        return false;  
    } // <- removed a trailing comma
});

DEMO: http://jsfiddle.net/pwgRC/

Some notes:

1) This plugin has only been tested with version 1.9 of jQuery, however, your jsFiddle is using jQuery version 1.11.0. No known issues but proceed with caution.

2) You cannot set onkeyup or onfocusout to true. As per documentation, this is an invalid selection as it's already the default behavior. I've seen true break this plugin. Only use false or an over-riding function.

3) Do not leave a function empty. If you want to disable the errorPlacement callback function, just place a return false inside.

4) I've removed some trailing commas. Mostly a technical problem in older versions of Internet Explorer, but IMO, it's sloppy programming.

Alternative:

Using the errorContainer: "#errbox" option improves the functionality quite a bit. You can then remove your show/hide code and your success option, since errorContainer automatically handles these functions.

Alternative DEMO: http://jsfiddle.net/pwgRC/1/

Then by using the errorLabelContainer and wrapper options, you can get rid of your invalidHandler and errorPlacement functions. (All errors are shown instead of only the first, but I wanted you to see that these options are available.)

Alternative DEMO 2: http://jsfiddle.net/pwgRC/2/

I suggest that you read through the documentation so you can decide best for yourself.

score 0 · Answer 2 · answered Feb 14 '14 at 14:04

I think that the following code work as you want:

<span id="errbox"></span>
<form id="myform" method="post" action="#">
<fieldset>
    <legend>1. Personal Details</legend>
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName" size="30" required /> 
    <br /><br />
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName" size="30" required />
</fieldset>
<br />
<input type="submit" value="Go" />            
</form>



$("#myform").validate({
    errorClass: 'validation-error',
    errorContainer:'#errbox',
    messages: {
        firstName: {required: "Please enter your First Name"},
        lastName: {required: "Please enter your last name - your maiden name if married"},
 },
 invalidHandler: function(form, validator) {
           // This handler will show only one error at time - the first in this instance // 
     //       var errors = validator.numberOfInvalids();
       //if (errors) {
             //$("#errbox").html(validator.errorList[0].message);
             //$("#errbox").show();
             //validator.errorList[0].element.focus();
        //} else {
          //   $("#errbox").html('');
        //}
  },       
  errorPlacement: function(error, element) {
               $("#errbox").html(error);
  },    
 });

 label.error {padding-left: .3em; color: #f00;}
 input.error {border: 1px solid #a00}
 .validation-error {border: 1px solid #f00; background-color: #fef1ec}

However you could follow the docs you need something else: Jquery validate

Jquery Validation - clear error message box when input has been corrected

2 Answers2

Related