Добавление правил валидатора jQuery к динамически созданным элементам в ASP

У меня есть некоторые динамически вставленные поля формы на странице в проекте MVC3. Обычно мы добавляем серверную часть проверки jQuery, но в этом случае мы не можем (несколько полей в пользовательском интерфейсе генерируют значение для одного скрытого поля), и это то, что представлено. Мы не можем проверять скрытое поле, поэтому мы должны вместо этого добавлять проверку только для UI для полей, которые может видеть пользователь)

Как только поля динамически добавляются на страницу, я запускаю следующий код над контейнером:

$container.find(".date").rules("add", {
    required: true,
    messages: {
        required: "The date is required"
    }
});

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

Я в недоумении. Любые идеи?

Я использую jQuery Validation 1.9.0 и ненавязчивый плагин

Ответ 1

Теперь, когда я понимаю, что происходит с ненавязчивой стороной плагинов (что я понимаю, так или иначе связано с ASP.NET), вот что вам нужно сделать:

После добавления нового элемента вызовите $.validator.unobtrusive.parseElement(newElement) и он будет добавлен в форму. Как и ваш ответ, вам нужно установить атрибуты data-val и data-val в новый элемент формы.

Итак, вы закончите с этим:

//create new form element
$('form fieldset').append('<br>New Field: '+
     '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+
     ' * Also required');

//add new rules to it
$.validator.unobtrusive
  .parseElement($('form').find('input[name="newField"]').get(0));

Показаны здесь: http://jsfiddle.net/ryleyb/LNjtd/2/

Ответ 2

Как выясняется, это можно сделать в основном в HTML, добавив несколько атрибутов к каждому элементу формы:

А name атрибут
data-val="true"
data-val-required="message"

Так же:

<input type='text' name="date" data-val="true" data-val-required="A date is required." />

Затем форма просто нуждается в повторном анализе через JS:

//Remove current form validation information
$("form")
    .removeData("validator")
    .removeData("unobtrusiveValidation");

//Parse the form again
$.validator
    .unobtrusive
    .parse("form");

Ответ 3

Я думаю, что у вас было что-то более простое - как будто ваш find('.date') на самом деле ничего не нашел. Потому что в противном случае ваш код выглядит вполне разумным для меня. Вот пример его работы, как вы ожидали: http://jsfiddle.net/ryleyb/LNjtd/

Я смог правильно проверить код:

$('form fieldset')
    .append('<br>New Field: <input type="text" name="newField"> * Also required')
    .find('input[name="newField"]').rules('add', {
      required: true,
      messages: {
        required: 'New field is required'
      }
    }
);