Проверка JQuery - Использование нескольких errorLabelContainer

Question

У меня есть форма с четырьмя различными наборами полей.Для проверки jQuery я хотел бы, чтобы ошибки от входов в каждом из наборов полей были помещены в блок ошибок в верхней части определенного набора полей.Например:

<fieldset id="contact">
  <legend>Contact Information</fieldset>
  <ul id="errors_contact" class="messages"></ul>
  <!-- input elements -->
</fieldset>

<fieldset id="financial">
    <legend>Financial Information</legend>
    <ul id="errors_financial" class="messages"></ul>
    <!-- input elements -->
</fieldset>

Можно ли это сделать с помощью проверки JQuery?

Answer 1

В частности, нельзя использовать errorLabelContainer, в коде есть одна настройка / хранилище для errorLabelContainer, , но , вы можете использовать , errorPlacement и wrapper, опции для эффекта , который вы хотите, например:

$("form").validate({
  wrapper: "li",
  errorPlacement: function(label, elem) {
    elem.closest("fieldset").find(".messages").append(label);
  }
});

Вместо стандартного .insertAfter() (обычно ставит <label> после элемента, в который он входитwith), это оборачивает его в <li></li> и добавляет его в контейнер .messages для текущего <fieldset>.

Answer 2

Я сделал это так:

У меня была форма, которая должна была проверять несколько элементов управления - но я хотел одну область ошибки - и одно сообщение для всех - одну строку.

По умолчанию, если вы используете errorLabelContainer, он помещает проверки как «дополнения» - то есть множественные проверки создают много строк в метке ошибки. Я заметил одну вещь - если он имел высоту labelcontainer менее 30px, он во второй раз создавал новую пустую строку. Я не знаю почему.

В моем случае это лейбл, но, конечно, тоже может быть и div. В моем HTML у меня есть это (при условии, что у вас есть jQuery validation.js и base):

Myform - это имя формы - тогда различные элементы управления HTML - любого типа - например:

INPUT id=theNameofcontrol type=checkbox name=theNameofcontrol validate=required:true

Затем контейнер для сообщения об ошибке (не знаю, как сделать так, чтобы он выглядел как HTML :)

label id=errorlabel name=errorlabel style=font-size:1.3em;height:30;color:red; /label

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

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

$("#MyForm").validate(<br>
{<br>
errorLabelContainer:"#errorlabel",<br>
messages : <br>
    {theNameofcontrol: {required: "" },<br>
    theNameofcontrol2: {required: "" },<br>
    theNameofcontrol3: {required: "" }<br>
    }   <br>
);<br>
<br>
 if(! $("#MyForm").valid())<br>
{<br>
$("#errorlabel").html("My message when not all contols are valid!");<br>
return false;<br>
}

Надеюсь, это полезно для вас. Вы должны быть в состоянии сделать то же самое для набора полей, если у вас есть контейнер для всех «объектов» в группе.

Для проверки одного элемента управления вы используете:

$("#MyForm").validate({errorLabelContainer:"#errorlabel",messages :{theNameofcontrol: {required: "This has to have a value" }}}).element("#theNameofcontrol");

Удачи