Индивидуальное размещение меток ошибок с использованием проверки jQuery (для всех или некоторых ваших ошибок)

Ответ 1

Итак, если вы хотите, чтобы все ваши сообщения об ошибках jQuery Validate отображались в одном месте, вы должны использовать http://docs.jquery.com/Plugins/Validation/validate#toptions (Найти errorPlacement) на этой странице.

Я заметил, что некоторые ответы здесь отвечают на один, но не на оба варианта.

1) Если вы хотите, чтобы вы произвольно размещали все свои ошибки, вы можете сделать это:

$("#myform").validate({
  errorPlacement: function(error, element) {
     error.appendTo('#errordiv');
   }
});

2) Если вы хотите указать конкретные местоположения для одного или нескольких меток ошибок, вы можете сделать это.

errorPlacement: function(error, element) {
    if (element.attr("name") == "email" )
        error.insertAfter(".some-class");
    else if  (element.attr("name") == "phone" )
        error.insertAfter(".some-other-class");
    else
        error.insertAfter(element);
}

Ответ 2

На самом деле его не нужно использовать для этого какой-либо код javascript, и я обнаружил простое решение. Вы можете заставить JQuery Validate помещать ошибку проверки в элемент DOM.

Например, JQuery генерирует такую ​​ошибку:

 <label for="firstname" generated="true" class="error">This field required.</label>

Вы можете поместить этот элемент ярлыка dom в свой следующий td-блок или элемент li или все, что хотите, в качестве пустого, как это.

<label for="firstname" generated="true" class="error"></label>

JQuery найдет это пустое поле и разместит для вас сообщение об ошибке.

Просто не запомните поле для в элементе label!

Ответ 3

Это более общее решение, не специфичное для структуры HTML OP.

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

$("#myform").validate({
  errorPlacement: function(error, element) {
     if (element.attr("name") == "myFieldName") {

       // do whatever you need to place label where you want

         // an example
         error.insertBefore( $("#someOtherPlace") );

         // just another example
         $("#yetAnotherPlace").html( error );  

     } else {

         // the default error placement for the rest
         error.insertAfter(element);

     }
   }
});

Онлайн-документация для опции errorPlacement:

Ответ 4

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

Код HTML

<p><label for="owner"><input  type="checkbox" name="option[]" id="owner" value="1"  validate="required:true, minlength:2" /> I am Owner of my Company</label></p>
<p><label for="agency"><input  type="checkbox" name="option[]" id="agency" value="1" /> I am an Agency</label>
<div id="errordiv"></div></p>
<hr>
<p><label for="agree"><input type="checkbox" name="agree" id="agree" value="1" required /> I Agree and I read the Privacy Polities and Use of Terms</label>
<div id="error_agree"></div>

Script

<script>
        $("#register_form").validate({ 
                        errorPlacement: function(error, element) {
                            if(element.attr("name") == "option[]"){
                                error.appendTo('#errordiv');
                                return;
                            }

                            if(element.attr("name") == "agree"){
                                    error.appendTo('#error_agree');
                                    return;
                            }else {
                                error.insertAfter(element);
                            }
                       }
                    });

        </script>