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

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

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

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

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

Я в растерянности. Есть идеи?

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

25
asp.net jquery jquery-validate unobtrusive-validation

3 ответов

теперь, когда я понимаю, что происходит с ненавязчивой стороной плагина (которая, как я понимаю, связана с 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/

7

как оказалось, это можно сделать в основном в 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");
54

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