Проверка jQuery для динамических элементов управления на стороне клиента

Question

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

$("#dynamicControlID").rules("add", {required:true});

Проблема возникает, когда я пытаюсь проверить форму.Когда я вызываю

$("#form1").validate()

, любые нединамические элементы управления, для которых указан класс «required», будут проверены с хорошим сообщением, которое говорит «это поле обязательно для заполнения». Элементы управления, которые были добавлены динамически, не отображаютсялюбое сообщение, и функция validate возвращает true, даже если они пусты.Настоящая путаница возникает, когда я проверяю динамические элементы управления индивидуально.Если я позвоню

$("#dynamicControlID").valid()

, он вернет false и отобразит сообщение об ошибке на входе.Я звоню

$("#form1").valid()

, прежде чем что-то делать с динамическими элементами управления.

Я что-то здесь упускаю?Я хотел бы позвонить

$("#form1").valid() 

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

Answer 1

Вы на правильном пути, но когда вы хотите добавить правила к новому элементу, вы уже должны вызвать $('#form1').validate();.

Таким образом, обычная настройка выглядит примерно так:

$('#form1').validate({
   //your options
});

$('#dynamicControlID').rules('add',{required:true});

Answer 2

Вы пытались создать правила проверки после добавления элементов управления в форму?

Вы можете настроить проверку при загрузке страницы и сохранить ее в переменной и динамически добавлять к ней правила, например:

var validator = $("#form1").validate(rules:{});

После добавления динамического элемента управления в форму ..

validator.settings.rules.new_control_name = { required: true };

Тогда при отправке формы:

if($("#form1").valid()){
    // valid
}