Проверка на стороне клиента с динамически добавленным полем
Я использую jQuery ненавязчивый плагин проверки в ASP.NET MVC. Любые поля, которые отображаются на сервере, правильно проверяются.
Однако, если я динамически добавляю поле в форму с помощью JavaScript, он не проверяется, даже если он имеет соответствующие атрибуты HTML5 data-*
.
Может ли кто-нибудь вести меня в правильном направлении, как я могу достичь этой цели?
Ответы
Ответ 1
Чтобы Дарин ответил на работу, я изменил следующую строку:
$.validator.unobtrusive.parse(selector);
Для этого:
$(selector).find('*[data-val = true]').each(function(){
$.validator.unobtrusive.parseElement(this,false);
});
Здесь полный образец:
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
// don't use the normal unobstrusive.parse method
// $.validator.unobtrusive.parse(selector);
// use this instead:
$(selector).find('*[data-val = true]').each(function(){
$.validator.unobtrusive.parseElement(this,false);
});
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
$('[name="' + elname + '"]').rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
$('[name="' + elname + '"]').rules("add", args);
}
});
}
});
}
})($);
$.validator.unobtrusive.parse
внутренне вызывает метод parseElement, но каждый раз, когда он отправляет параметр isSkip
в значение true, поэтому с этим значением
if (!skipAttach) {
valInfo.attachValidation();
}
этот код в jquery.unobtrusive.js не прикрепляет валидацию к элементу, и мы находим только данные валидации входов, которые изначально присутствовали на странице.
Примечание Дарин отвечает выше, и вы можете найти в своем блоге, что многие люди решили проблему с использованием xhalent кода (отправлено darin). почему это не сработало, я не понимаю. Кроме того, вы можете найти много posts, которые говорят вам, что просто вызывать
$.validator.unobtrusive.parse(selector)
достаточно для динамически загружаемого содержимого для проверки
Ответ 2
Простой ответ:
Я использую MVC 4 и JQuery 1.8. Я добрался до модульной функции, которая принимает объект jQuery только что добавленного элемента:
function fnValidateDynamicContent($element) {
var $currForm = $element.closest("form");
$currForm.removeData("validator");
$currForm.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($currForm);
$currForm.validate(); // This line is important and added for client side validation to trigger, without this it didn't fire client side errors.
}
Например, если вы добавили новую таблицу с идентификатором tblContacts
, вы можете вызвать следующее:
fnValidateDynamicContent($("#tblContacts"))
Ответ 3
Здесь сообщение в блоге вы можете найти полезное, и это должно поставить вас на правильный путь. Метод расширения оттуда:
/// <reference path="jquery-1.4.4.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />
(function ($) {
$.validator.unobtrusive.parseDynamicContent = function (selector) {
//use the normal unobstrusive.parse method
$.validator.unobtrusive.parse(selector);
//get the relevant form
var form = $(selector).first().closest('form');
//get the collections of unobstrusive validators, and jquery validators
//and compare the two
var unobtrusiveValidation = form.data('unobtrusiveValidation');
var validator = form.validate();
$.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
if (validator.settings.rules[elname] == undefined) {
var args = {};
$.extend(args, elrules);
args.messages = unobtrusiveValidation.options.messages[elname];
$('[name="' + elname + '"]').rules("add", args);
} else {
$.each(elrules, function (rulename, data) {
if (validator.settings.rules[elname][rulename] == undefined) {
var args = {};
args[rulename] = data;
args.messages = unobtrusiveValidation.options.messages[elname][rulename];
$('[name="' + elname + '"]').rules("add", args);
}
});
}
});
}
})($);
а затем:
var html = "<input data-val='true' "+
"data-val-required='This field is required' " +
"name='inputFieldName' id='inputFieldId' type='text'/>;
$("form").append(html);
$.validator.unobtrusive.parseDynamicContent('form input:last');
Обновлено для добавления исправления, упоминаемого в комментариях к сообщению в блоге, в противном случае возникают ошибки js.