Ответ 1

Вы найдете документацию для мета-опции в 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 дает событие "скрыть", но его не существует. Позвольте добавить событие hide!

• Сначала нам нужен плагин AOP

• Мы добавляем рекомендации для метода hide:

              jQuery.aop.before({target: jQuery.fn, method: "hide"},
                  function(){
                      this.trigger("hide");
                  });
  

• Мы связываем событие hide, чтобы скрыть клонированную ошибку:

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

Попробуйте

Ответ 2

Сначала ваш контейнер должен использовать идентификатор вместо класса. (Я собираюсь предположить, что идентификатор "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);
            }    

        });
    });

Я предполагаю, что вы хотите <p> тег вокруг каждой из отдельных ошибок. Обычно я использую <ul> контейнер для фактического контейнера (вместо используемого вами div, называемого контейнерным перевозчиком) и <li> для каждой ошибки (этот элемент указан в строке "обертка" )

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

Ответ 3

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

$("#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({ ... })

Ответ 4

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

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
      }           
  }); 
}); 

Ответ 5

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

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>

Ответ 6

Я не знаю, поддерживает ли плагин проверки правильность, но вы, вероятно, можете использовать стандартный 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();
});

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