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

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

27 голосов
/ 22 февраля 2012

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

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

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

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

Я в растерянности.Любые идеи?

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

Ответы [ 3 ]

59 голосов
/ 22 февраля 2012

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

  • A 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");
8 голосов
/ 23 февраля 2012

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

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

Итак, в итоге вы получите: 

//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/

1 голос
/ 22 февраля 2012

Я думаю, вы ошиблись чем-то более простым - например, ваш 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'
      }
    }
);​
...