errorList doesn't contain all errors

[iamdriz]

Your environment

jquery-validate 1.15.0
all browsers

Steps to reproduce

A simple HTML form with two required fields and a custom data-attribute to tell the JS to show the validation errors in a list:

HTML:

<form data-validation-list="true">
  <div class="form__group">
    <div class="form__group__input">
      <input type="text" id="field1" required>
    </div>
  </div>
  <div class="form__group">
    <div class="form__group__input">
      <input type="text" id="field2" required>
    </div>
  </div>
  <div class="form__summary"></div>
  <div class="form__actions">
    <button type="submit">Submit</button>
  </div>
</form>

JS:

var validator = $('form').validate({
    ignore: '.ignore',
    errorClass: 'form__error__single',
    errorElement: 'label',
    onkeyup: function(element) {
        $(element).valid();
      customErrors();
    },
    errorPlacement: function (error, element) {
        if ($('form').attr('data-validation-list') != 'true')
            $(element).parent('.form__group__input').append(error);
    },
    highlight: function (element) {
        $(element).parents('.form__group')
            .removeClass('form__group--valid')
            .addClass('form__group--error');
    },
    unhighlight: function (element) {
        $(element).parents('.form__group')
            .removeClass('form__group--error')
            .addClass('form__group--valid');
    },
    invalidHandler: function (form, validator) {
        customErrors();
    }
});

function customErrors() {
    if ($('form').attr('data-validation-list') == 'true') {
        var errors = validator.numberOfInvalids();
        console.log(errors);
        console.log(validator.errorList);
        if (errors) {
            if (validator.errorList.length > 0) {
                var errorHtml = '\
                    <div class="form__error">\
                        <p class="form__error__intro">Your form contains ' + errors + ' error' + (validator.errorList.length > 1 ? 's' : '') + ', see details below.</p>\
                        <ul class="form__error__list">';
                for (var i = 0; i < validator.errorList.length; i++) {
                    errorHtml += '<li class=""><label id="' + $(validator.errorList[i]['element']).attr('id') + '-error" for="' + $(validator.errorList[i]['element']).attr('id') + '">' + validator.errorList[i]['message'] + '</label></li>';
                }
                errorHtml += '</ul></div>';
                $('.form__summary').html(errorHtml);
            }
            else
                $('.form__summary').html('');
        } else
            $('.form__summary').html('');
    } else
        $('.form__summary').html('');
}

Type in the first box and then delete it and do the same on the second box.

Expected behaviour

The custom errors function should be showing a list of the errors found when the user keys up.

Actual behaviour

I'm finding is that errorList array only contains the last error. But numberOfInvalids is returning the correct number of errors. But because errorList only contains the last error then it doesn't show all the errors. The two console logs confirm this.

Interestingly if you submit the form then it shows the correct errors. Looks like when calling valid on a single element the errorList contains only the elements errors.

[jadamec]

Anything new about this? Thanks.

[amodkk]

I had this same issue.
In my case, calling $(formSelector).valid() before checking validator.errorList resulted in the errorList having the correct number of elements.

[capraynor]

I've found one possible reason, that after .valid called, the .validate method will NOT return all the errors.
To get rid of this issue, please remove the call to .valid, and use .validate instead.