Как отображать сообщения в invalidHandler в валидаторе JQuery

Question

Я пытаюсь использовать валидатор JQuery в форме и пытаюсь выяснить, получать ли сообщения об ошибках в параметре invalidHandler (или, если есть где-то еще, сказать)

Когда пользователь нажимает кнопку отправки, какой бы ни была первая ошибка, я хочу отобразить окно с сообщением об ошибке. Я не хочу, чтобы ошибка была написана на документе. Я не могу понять, как получить сообщения об ошибках для использования в предупреждении после проверки. Я только нашел, как получить элементы, и это действительно не помогает мне.

Вытащив из примера, вот код, который я тестирую с

$(document).ready(function() {
    $('#commentForm').validate({
        invalidHandler: function(f, v) {
            var errors = v.numberOfInvalids();
            if (errors) {
                var invalidElements = v.invalidElements();
                alert(invalidElements[0]);
            }
        }
    });
});

и

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

Answer 1

Это работает для меня ...

    invalidHandler: function(form, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        var message = errors == 1
          ? 'Please correct the following error:\n'
          : 'Please correct the following ' + errors + ' errors.\n';
        var errors = "";
        if (validator.errorList.length > 0) {
            for (x=0;x<validator.errorList.length;x++) {
                errors += "\n\u25CF " + validator.errorList[x].message;
            }
        }
        alert(message + errors);
      }
      validator.focusInvalid();
    }

Answer 2

Перегрузка showErrors сработала как положено. Мне просто нужно было получить первое сообщение об ошибке.

    showErrors: function(errorMap, errorList) {
        alert(errorList[0].message);
    }

Также не забудьте взглянуть на опции onfocusout и onkeyup, иначе вы получите непрерывные сообщения.

Answer 3

ДОЛЖЕН проверить errorList.length

if (errorList.length > 0) alert(errorList[0].message);

Answer 4

Вы не должны использовать оповещение,

Но если вы действительно хотите это использовать. Решение зависит от того, как плагин добавляет элементы dom, но вы можете удалить эти элементы dom в invalidHandler. Так что добавьте те элементы dom, но удалите их.

Другой вариант заключается в том, что вы должны установить плагин, который вы используете для проверки, а не добавлять предупреждение dom show.

Answer 5

Я знаю, что вопрос довольно старый, но чтобы помочь другим людям получить лучший ответ, я бы посоветовал вам, ребята, не использовать invalidHandler, а showErrors.

Это потому, что invalidHandler будет вызываться только при отправке формы во время showErrors вызывается каждый раз, когда поле обновляется.

Итак, сделайте это:

Скрипт в конце страницы

 $("form").validate({
    rules: {
        name: {
            required: true
        }
    },
    messages: {
        name: {
            required: "required"
        }
    },
    highlight: function (element) {
        $(element).closest('.form-group').removeClass('has-success').addClass('has-error')
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-ok').addClass('glyphicon-remove');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        $(element).parent().find('.form-control-feedback').removeClass('glyphicon-remove').addClass('glyphicon-ok');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function (error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    },
    showErrors: function (errorMap, errorList) {
        var errors = this.numberOfInvalids();
        if (errors) {
            var message = errors == 1
              ? 'Your form has 1 error'
              : 'Your form has ' + errors + ' errors.';
            message = message + ' Please, fix then.'
            $("#error span").empty().html(message);
            $("#error").show();
        } else {
            $("#error").hide();
        }
        this.defaultShowErrors();
    },
});

Не забывайте свой HTML-тег

<div id="error"><span></span></div>