Как отобразить контейнер с ошибкой проверки jQuery только при отправке - PullRequest
14 голосов
/ 13 ноября 2008

Я пытаюсь заставить работать плагин проверки . Он отлично работает для отдельных полей, но когда я пытаюсь включить демонстрационный код для контейнера ошибок, который содержит все ошибки, у меня возникает проблема. Проблема в том, что он отображает контейнер со всеми ошибками, когда я нахожусь во всех полях, но я хотел бы отображать контейнер ошибок только тогда, когда пользователь нажимает кнопку отправки (но все еще отображает встроенные ошибки рядом с элементом управления при потере фокуса).

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

В чем заключается хитрость, чтобы получить список подробных сообщений об ошибках? То, что я хотел бы, это отобразить «ОШИБКА» рядом с элементом управления по ошибке, когда пользователь нажимает кнопку вкладки, и иметь сводку всего в конце, когда он нажимает кнопку «Отправить». Это возможно?

Код со всеми входами отсюда:

    $().ready(function() {
        var container = $('div.containererreurtotal');

        // validate signup form on keyup and submit
        $("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) {
          var err = validator.numberOfInvalids();
          if (err) {
            container.html("THERE ARE "+ err + " ERRORS IN THE FORM")
            container.show();
          } else {
            container.hide();
          }
        }).validate({
                    rules: {
                            nickname_in: {
                                    required: true,
                                    minLength: 4
                            },
                            prenom_in: {
                                    required: true,
                                    minLength: 4
                            },
                            nom_in: {
                                    required: true,
                                    minLength: 4
                            },
                            password_in: {
                                    required: true,
                                    minLength: 4
                            },
                            courriel_in: {
                                    required: true,
                                    email: true
                            },
                            userdigit: {
                                    required: true
                            }
                    },
                    messages: {
                            nickname_in: "ERROR",
                            prenom_in: "ERROR",
                            nom_in: "ERROR",
                            password_in: "ERROR",
                            courriel_in: "ERROR",
                            userdigit: "ERROR"
                    }

                    ,errorPlacement: function(error, element){
                            container.append(error.clone());
                            error.insertAfter(element);
                    }

            });
    });

Ответы [ 6 ]

16 голосов
/ 05 июня 2009

Сначала ваш контейнер должен использовать идентификатор вместо класса .. (я собираюсь предположить, что идентификатор - "containererreurtotal")

Тогда попробуйте это ..

    $().ready(function() {

        $('div#containererreurtotal').hide();

        // validate signup form on keyup and submit
        $("#frmEnregistrer").validate({
            errorLabelContainer: "#containererreurtotal",
            wrapper: "p",
            errorClass: "error",
            rules: {
                nickname_in: { required: true, minLength: 4 },
                prenom_in: { required: true, minLength: 4 },
                nom_in: { required: true, minLength: 4 },
                password_in: { required: true, minLength: 4 },
                courriel_in: { required: true,  email: true },
                userdigit: { required: true }
            },
            messages: { 
                nickname_in: { required: "Nickname required!", minLength: "Nickname too short!" },
                prenom_in: { required: "Prenom required!", minLength: "Prenom too short!" },
                nom_in: { required: "Nom required!", minLength: "Nom too short!" },
                password_in: { required: "Password required!", minLength: "Password too short!" },
                courriel_in: { required: "Courriel required!", email: "Courriel must be an Email" },
                userdigit: { required: "UserDigit required!" }
            },
            invalidHandler: function(form, validator) {
                $("#containererreurtotal").show();
            },
            unhighlight: function(element, errorClass) {
                if (this.numberOfInvalids() == 0) {
                    $("#containererreurtotal").hide();
                }
                $(element).removeClass(errorClass);
            }    

        });
    });

Я предполагаю, что вы хотите добавить тег

для каждой отдельной ошибки. Обычно я использую контейнер

  • для каждой ошибки (этот элемент указан в строке «оболочки»)

    Если вы укажете #containererreurtotal в качестве дисплея: нет; в вашем CSS вам не понадобится первая строка в функции ready ($ ('div # containererreurtotal'). hide ();)

14 голосов
/ 13 ноября 2008

Документацию по мета-опции вы найдете в http://docs.jquery.com/Plugins/Validation/validate#toptions

Если вы хотите отобразить ошибки рядом со входами И в отдельном контейнере ошибок, вам нужно будет переопределить обратный вызов errorPlacement.

Из вашего примера:

...
                    courriel_in: "ERROR",
                    userdigit: "ERROR"
            }
            ,errorContainer: container

            ,errorPlacement: function(error, element){
                var errorClone = error.clone();
                container.append(errorClone);
                error.insertAfter(element)              
            }

            // We don't need this options
            //,errorLabelContainer: $("ol", container)
            //,wrapper: 'li'
            //,meta: "validate"
    });
 ...

Параметр error является объектом jQuery, содержащим тег <label>. Параметр element является входом, который не прошел проверку.

Обновление к комментариям

С помощью приведенного выше кода контейнер ошибок не будет очищать ошибки, поскольку он содержит клонированную копию. Это легко решить, если jQuery выдает событие «скрыть», но его не существует. Давайте добавим событие скрытия!

  1. Сначала нам понадобится плагин AOP
  2. Добавим совет по методу скрытия:

                jQuery.aop.before({target: jQuery.fn, method: "hide"},
                    function(){
                        this.trigger("hide");
                    });
    
  3. Мы связываем событие hide, чтобы скрыть клонированную ошибку:

            ...
            ,errorPlacement: function(error, element){
                var errorClone = error.clone();
                container.append(errorClone);
                error.insertAfter(element).bind("hide", function(){
                    errorClone.hide();
                });
            }
            ...
    

Дайте ему попытку

3 голосов
/ 17 марта 2011

У меня немного другое решение:

jQuery(document).ready(function() {
  var submitted = false;
  var validator = jQuery("#emailForm").validate({ 
      showErrors: function(errorMap, errorList) {
          if (submitted) {
              var summary = "";
              jQuery.each(errorList, function() {
              summary += "<li><label for='"+ this.element.name;
              summery += "' class='formError'>" + this.message + "</label></li>"; });
              jQuery("#errorMessageHeader").show();
              jQuery("#errorMessageHeader").children().after().html(summary);
              submitted = false;
          }
          this.defaultShowErrors();
      },          
      invalidHandler: function(form, validator) { submitted = true; },
      onfocusout: function(element) { this.element(element); },
      errorClass: "formError",
      rules: { 
          //some validation rules 
      },
      messages: { 
          //error messages to be displayed
      }           
  }); 
}); 
3 голосов
/ 13 ноября 2008

Я бы удалил errorContainer, а затем перехватил валидацию при обратной передаче и там вручную добавил ошибку контейнера, например:

$("#frmEnregistrer").bind("invalid-form.validate", function(e, validator) {
  var err = validator.numberOfInvalids();
  if (err) {
    container.html("THERE ARE "+ err + " ERRORS IN THE FORM")
    container.show();
  } else {
    container.hide();
  }
}).validate({ ... })
2 голосов
/ 01 декабря 2012

Я решил эту проблему с помощью следующего короткого кода:

errorElement: "td",
errorPlacement: function (error, element) {
     error.insertAfter(element.parent());
} 

Моя структура следующая:

<table>
   <tr>
      <td>Name:</td>
      <td><input type="text" name="name"></td>
   </tr>
</table>

Так что мои ошибки теперь будут отображаться прямо в <td> позади моего <input>

0 голосов
/ 13 ноября 2008

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

<div id="container" style="display:none;"></div>

Затем вы можете подключить событие onsubmit к форме, которая сделает контейнер видимым, как только будет сделана попытка отправить форму:

jQuery('#formId').onsubmit(function() {
    // This will be called before the form is submitted
    jQuery('#container').show();
});

Надеемся, что сочетание этого с существующим кодом поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...