errorList doesn't contain all errors

Author: iamdrizCreated Sep 21, 2016Updated Feb 23, 2024

LabelsType: BugStatus: Verified

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:

bash

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.

Source: jquery-validation/jquery-validation

View original on GitHub View discussion on GitHub