Проверка JQuery - показать сводку проверки во время активной проверки?

Question

Можно ли получить проверку jquery для отображения сводки проверки с помощью активной проверки?

Я использую MVC 3 (если это имеет значение) и мои формы проверяются, когда каждый элемент теряет фокус:

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } };

Это показывает отдельные ошибки в каждом поле, однако я также хочу показать эти ошибки в сводном блоке проверки.Тем не менее, это резюме проверки отображается только при отправке формы, а не потерял фокус.

Я пытался подключиться к showErrors, однако это дает мне только текущую ошибку поля, а не текущий список ошибок.

---

Для полноты вот код формы:

@using (Ajax.BeginForm(...))
{

  <div class="field-panel">
    @Html.EditorFor(m => m.PatientID)
    ...

  </div>
  <input type="submit" class="carecon-button-next" value="Next" />
  @Html.ValidationSummary(null, new { @class = "validation-summary" })
}

Answer 1

Хорошо, думаю, я понял это.

Проблема на самом деле связана с использованием ненавязчивой проверки с MVC 3, поскольку она выполняет инициализацию проверки JQuery для вас. Таким образом, единственный способ настроить проверку - использовать form.data("validator").settings. Тем не менее, пытаясь установить errorLabelContainer с помощью этого метода, т. Е .:

$("#form").data("validator").settings.errorLabelContainer = "#messageBox";

... не работает, потому что проверка jQuery использует это значение только внутри своей функции init (), чтобы сконфигурировать кучу других параметров, таких как контейнеры и т. Д. Я пытался эмулировать то, что он делает, или даже вызывать $("#form").data("validator").init() снова после установки errorLabelContainer, но это вызвало странное поведение и скрыло кучу других настроек.

Так что я выбрал другой подход. Во-первых, я предоставил MVC место для вставки отдельных строк ошибок, используя @Html.ValidationMessageFor() и добавив display:none, чтобы скрыть его:

@using (Ajax.BeginForm(...))
{

  <div class="field-panel">
    @Html.EditorFor(m => m.PatientID)
    @Html.ValidationMessageFor(m => m.PatientID, null, new { style = "display:none"})
    ...

  </div>
  <input type="submit" class="carecon-button-next" value="Next" />
  <ul id="error-summary">
  </ul>
}

Затем в обратном вызове showErrors я копирую эти строки в сводку проверки после вызова defaultShowErrors():

    $("#form").data("validator").settings.onfocusout = function (element) { $(element).valid(); };
    $("#form").data("validator").settings.showErrors = function (errorMap, errorList) {
        this.defaultShowErrors();
        $("#error-summary").empty();
        $(".field-validation-error span", $("#form"))
            .clone()
            .appendTo("#error-summary")
            .wrap("<li>");

    };

Это дало мне поведение, которое я хотел, показывая / скрывая ошибки проверки в виде списка в сводке, когда пользователь заполнял поля в форме.

Answer 2

У меня были похожие проблемы, и я написал это, кажется, простой способ получить поведение, которое вы ищете:

function EnableEagerValidation(){
    var itemsNeedingValidation = $('*[data-val="true"]');
    itemsNeedingValidation.each(function () {
        $(this).blur(function(){$(this).closest("form").valid();});
    });
}

Answer 3

Это с демонстрационной страницы ;invalidHandler и код для создания сводки ошибок.Но он запускается при отправке form, которая не соответствует запрашиваемой вами.

invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                 ? 'You missed 1 field. It has been highlighted below'
                 : 'You missed ' + errors + ' fields.  They have been highlighted below';
                 $("div.error span").html(message);
                 $("div.error").show();
        } else {
            $("div.error").hide();
        }
},

Однако метод errorLabelContainer: не требует отправки form. Согласно документации , "Все метки ошибок отображаются внутри неупорядоченного списка с идентификатором" messageBox ", как указано селектором, передаваемым как опция errorContainer. Все элементы ошибок заключены в элемент li, чтобы создать список сообщений. "

errorLabelContainer: "#messageBox",

Вот примерная демонстрация, показывающая проверку с использованием onfocusout.Нет кнопки подтверждения, чтобы доказать это.#messageBox накапливает все сообщения по мере их сбора.

http://jsfiddle.net/sparky672/bAN2Q/