CODEWITHSUNDEEP
jqueryjquery-validate
srakl
srakl

Reputation: 2619

jQuery Validate plugin's invalidHandler counter

How do I get the jQuery Validate plugin to update the invalidHandler error counter when a valid entry is done?

$(document).ready(function () {
    $("#report-listing-form").validate({
        rules: {
            'listing-report-email': {
                required: true,
                email: true
            },
                'listing-report-name': {
                required: true
            },
                'listing-report-phone': {
                number: true,
                minlength: 7,
                maxlength: 12
            },
                'contact-msg': {
                required: true,
                maxWords: 1000
            }
        },
        errorPlacement: function(error, element) {
            return false;  // will suppress error messages
        },
        invalidHandler: function (event, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = (errors == 1) ? '1 invalid field.' : errors + ' invalid fields.';

                $("#err_report-listing-form").html(message).addClass("text-error");
            }
        },
        submitHandler: function (form) {
            alert('valid form');
            return false;
        }
    });
});

here is a working example of my code http://jsfiddle.net/4VP9X/12/

Upvotes: 0

Views: 4823

Answers (2)

Sparky
Sparky

Reputation: 98748

Quote OP:

"How do I get the jQuery Validate plugin to update the invalidHandler error counter when a valid entry is done?"

Short answer: You cannot.

As per the documentation:

invalidHander: "Callback for custom code when an invalid form is submitted. Called with a event object as the first argument, and the validator as the second."

In other words, the invalidHander callback only fires upon the submit event. You can see this behavior in your own jsFiddle. There is no workaround, unless you want to hack the code of the plugin itself.

Upvotes: 1

maxtwoknight
maxtwoknight

Reputation: 5346

Based on this link jquery validate plugin, I added the showErrors callback. It was closer, but it only updates when a field format fails, like email or phone number. It didn't seem to work on empty fields.

showErrors: function(errorMap, errorList) {
  var errors = this.numberOfInvalids();
  if (errors) {
    var message = (errors == 1) ? '1 invalid field.' : errors + ' invalid fields.';
    $("#err_report-listing-form").html(message).addClass("text-error");
      this.defaultShowErrors();
    }               
  },

Upvotes: 5

Related Questions