it-swarm.com.ru

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

Я хотел бы разместить одну метку ошибки (Not All) в произвольном месте. jQuery предоставляет эту опцию http://docs.jquery.com/Plugins/Validation/validate#toptions , но я не смог найти ничего о том, как разместить одно конкретное сообщение об ошибке и не изменить расположение по умолчанию для всех остальных?

Не забудьте проверить все ответы ниже. Есть несколько решений для этого. Спасибо всем!

40
chainwork

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

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

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

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

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

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

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

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

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

Только не забудьте поле for в элементе label!

38
Abdurrahman I.

Это более общее решение, не относящееся к 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:

15
Sparky

Я обнаружил, что если у вас есть более двух меток для пользовательских ошибок в разных местах, может быть сумасшедшая ошибка позиции, если вы не делаете ни одного возврата для каждого, если для 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>
        $("#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>
0
XMaster