내가 함께 일하고 ASP.Net MVC3수있게 될 것이다 클라이언트 유효성 검사를 사용하는 쉬운 방법, jquery.validate.unobtrusive. 모든 것이 서버에서 제대로 작동합니다.
하지만 자바 스크립트로 새로운 ‘입력’을 주입하려고 할 때 $.validator.unobtrusive.parse()유효성 검사를 다시 바인딩 하기 위해 호출해야한다는 것을 알았습니다 . 그러나 여전히 모든 동적 주입 필드가 작동하지 않습니다.
더 나쁜 것은 사용하여 수동으로 바인딩하려고 시도 jquery.validate했지만 작동하지 않습니다. 이견있는 사람?
답변
내 상황에 대해이 문제를 해결 한 jquery.validate.unobtrusive 라이브러리에 대한 확장을 만들었습니다. 관심이있을 수 있습니다.
http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/
답변
나는 Xhalent의 접근 방식을 시도했지만 불행히도 그것은 나를 위해 작동하지 않았습니다. Robin의 접근 방식은 효과가 있었지만 효과가 없었습니다. 동적으로 추가 된 요소에 대해서는 훌륭하게 작동했지만 JQuery를 사용하여 DOM에서 모든 유효성 검사 속성과 범위를 제거하려고하면 유효성 검사 라이브러리가 여전히 유효성 검사를 시도합니다.
그러나 “validationData”와 함께 양식의 “unobtrusiveValidation”데이터를 제거하면 유효성을 검사하거나 유효성을 검사하지 않을 요소를 동적으로 추가하고 제거하는 매력처럼 작동했습니다.
$("form").removeData("validator");
$("form").removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse("form");
답변
실제로 @viggity 및 @Robins 솔루션의 단순함이 마음에 들었 기 때문에이를 간단한 플러그인으로 바꿨습니다.
(function ($) {
$.fn.updateValidation = function () {
var $this = $(this);
var form = $this.closest("form")
.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(form);
return $this;
};
})(jQuery);
사용 예 :
$("#DischargeOutcomeNumberOfVisits")
.attr("data-val-range-min", this.checked ? "1" : "2")
.updateValidation();
답변
나는 같은 문제가 있습니다. 동일한 형식으로 $ .validator.unobtrusive.parse ()를 두 번 호출 할 수 없다는 것을 발견했습니다. 서버에서 처음으로 양식을로드 할 때 양식은 눈에 잘 띄지 않는 라이브러리에 의해 자동으로 구문 분석됩니다. 양식에 동적으로 입력 요소를 추가하고 $ .validator.unobtrusive.parse ()를 다시 호출하면 작동하지 않습니다. parseElement ()도 마찬가지입니다.
눈에 거슬리지 않는 lib는 jquery validate 플러그인의 validate 메소드를 호출하여 모든 규칙과 메시지를 설정합니다. 문제는 다시 호출 될 때 플러그인이 주어진 새 규칙 세트를 업데이트하지 않는다는 것입니다.
한 가지 조잡한 해결책을 찾았습니다. 눈에 거슬리지 않는 lib에서 parse 메서드를 호출하기 전에 양식 유효성 검사기를 버립니다.
$('yourForm').removeData("validator");이제는 눈에 띄지 않는 lib에서 validate 메소드를 호출하면 동적으로 추가 된 입력을 포함하여 모든 규칙과 메시지가 다시 생성됩니다.
도움이 되었기를 바랍니다
답변
내가 사용하고 MVC 4 JQuery와 1.8, 다음 코드 조각 같은 외모는 DOM에 아약스 또는 jQuery를 통해 검증 동적으로 주입 내용에 jQuery를 가능하게하기 위해 필요합니다.
새로 추가 된 요소의 Jquery 객체를 받아들이는 모듈 함수를 만들었습니다. tblContacts버튼 클릭으로 Jquery를 사용하여 id로 새 테이블을 복제 한 경우 js 파일에 아래 함수를 포함하십시오.
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.
}
다음과 같이 부릅니다.
fnValidateDynamicContent("#tblContacts")답변
jquery 유효성 검사 문서에서 직접 규칙 함수를 사용하지 않는 이유는 무엇입니까? 이렇게 :
$('#newField0').rules('add', {
required: true,
minlength: 2
});
//use Html.ValidationMessage will renders a span element, unobtrusive need it to display errors
$('@Html.ValidationMessage("newField0")').insertAfter('#newField0');답변
위의 답변으로 표시된 Xhalent의 솔루션에서 가져 와서 조금 확장했습니다.
$.validator.unobtrusive.parseDynamicContent = function (selector) {
var $selector = $(selector),
$jqValUnob = $.validator.unobtrusive,
selectorsDataValAttr = $selector.attr('data-val'),
$validationInputs = $selector.find(':input[data-val=true]');
if ((selectorsDataValAttr !== 'true') &&
($validationInputs.length === 0)) {
return;
}
if (selectorsDataValAttr === 'true') {
$jqValUnob.parseElement(selector, true);
}
$validationInputs.each(function () {
$jqValUnob.parseElement(this, true);
});
//get the relevant form
var $form = $selector.first().closest('form');
$jqValUnob.syncValdators($form);
};
/* synchronizes the unobtrusive validation with jquery validator */
$.validator.unobtrusive.syncValdators = function ($form) {
if ($.hasData($form[0])) {
var unobtrusiveValidation = $form.data('unobtrusiveValidation'),
validator = $form.validate();
// add validation rules from unobtrusive to jquery
$.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);
}
});
}
});
// remove all validation rules from jquery that arn't in unobtrusive
$.each(validator.settings.rules, function (elname, elrules) {
if (unobtrusiveValidation.options.rules[elname] === undefined) {
delete validator.settings.rules[elname];
} else {
$.each(elrules, function (rulename, data) {
if (rulename !== "messages" && unobtrusiveValidation.options.rules[elname][rulename] === undefined) {
delete validator.settings.rules[elname][rulename];
}
});
}
});
}
};
$.validator.unobtrusive.unparseContent = function (selector) {
var $selector = $(selector);
// if its a text node, then exit
if ($selector && $selector.length > 0 && $selector[0].nodeType === 3) {
return;
}
var $form = $selector.first().closest('form'),
unobtrusiveValidation = $form.data('unobtrusiveValidation');
$selector.find(":input[data-val=true]").each(function () {
removeValidation($(this), unobtrusiveValidation);
});
if ($selector.attr('data-val') === 'true') {
removeValidation($selector, unobtrusiveValidation);
}
$.validator.unobtrusive.syncValdators($form);
};
function removeValidation($element, unobtrusiveValidation) {
var elname = $element.attr('name');
if (elname !== undefined) {
$element.rules('remove');
if (unobtrusiveValidation) {
if (unobtrusiveValidation.options.rules[elname]) {
delete unobtrusiveValidation.options.rules[elname];
}
if (unobtrusiveValidation.options.messages[elname]) {
delete unobtrusiveValidation.options.messages[elname];
}
}
}
}따라서 기본적으로 위의 Xhalent의 솔루션과 동일하게 작동하지만 DOM에서 제거하는 요소에 대한 규칙을 제거하는 기능을 추가했습니다. 따라서 Dom에서 요소를 제거하고 해당 유효성 검사 규칙을 제거하려면 다음을 호출하십시오.
$.validator.unobtrusive.unparseContent('input.something');