AJAX 호출을 통해 동적으로로드되는 부분보기로 작업하기 위해 눈에 잘 띄지 않는 jquery 유효성 검사를 시도하는 데 문제가 있습니다.
이 코드를 운없이 작동 시키려고 며칠을 보냈습니다.
보기는 다음과 같습니다.
@model MvcApplication2.Models.test
@using (Html.BeginForm())
{
@Html.ValidationSummary(true);
<div id="res"></div>
<input id="submit" type="submit" value="submit" />
}
부분보기 :
@model MvcApplication2.Models.test
@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);
<script type="text/javascript" >
$.validator.unobtrusive.parse(document);
</script>
모델:
public class test
{
[Required(ErrorMessage= "required field")]
public int MyProperty { get; set; }
}
컨트롤러 :
public ActionResult GetView()
{
return PartialView("Test");
}
그리고 마지막으로 자바 스크립트 :
$(doument).ready(function () {
$.ajax({
url: '/test/getview',
success: function (res) {
$("#res").html(res);
$.validator.unobtrusive.parse($("#res"));
}
});
$("#submit").click(function () {
if ($("form").valid()) {
alert('valid');
return true;
} else {
alert('not valid');
return false;
}
});
유효성 검사가 작동하지 않습니다. texbox에 정보를 입력하지 않아도 제출 이벤트에 경고 ( ‘유효’)가 표시됩니다.
그러나 뷰를 동적으로로드하는 대신 @Html.Partial("test", Model)
메인 뷰에서 부분 뷰를 렌더링하는 데 사용 하는 경우 (AJAX 호출을 수행하지 않음) 유효성 검사가 제대로 작동합니다.
콘텐츠를 동적으로로드하면 컨트롤이 아직 DOM에 존재하지 않기 때문일 수 있습니다. 하지만 $.validator.unobtrusive.parse($("#res"));
새로로드 된 컨트롤에 대해 유효성 검사기에게 허용하기에 충분한 호출을 합니다.
누구든지 도울 수 있습니까?
답변
이미 구문 분석 된 양식을 구문 분석하려고하면 업데이트되지 않습니다.
양식에 동적 요소를 추가 할 때 수행 할 수있는 작업은
-
양식의 유효성 검사를 제거하고 다음과 같이 다시 유효성을 검사 할 수 있습니다.
var form = $(formSelector) .removeData("validator") /* added by the raw jquery.validate plugin */ .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin*/ $.validator.unobtrusive.parse(form);
-
unobtrusiveValidation
jquerydata
메서드를 사용하여 양식의 데이터에 액세스합니다 .$(form).data('unobtrusiveValidation')
그런 다음 규칙 컬렉션에 액세스하고 새 요소 속성 (다소 복잡함)을 추가합니다.
양식에 동적 요소를 추가하는 데 사용되는 플러그인에 대해 ASP.Net MVC의 동적 콘텐츠에 눈에 띄지 않는 jquery 유효성 검사 적용 에 대한이 문서를 확인할 수도 있습니다 . 이 플러그인은 두 번째 솔루션을 사용합니다.
답변
Nadeem Khedr의 답변에 추가로 ….
DOM에 양식을 동적으로로드 한 다음
jQuery.validator.unobtrusive.parse(form);
(추가 비트가 언급되어 있음) 그런 다음 ajax를 사용하여 해당 양식을 제출할 것입니다.
$(form).valid()
양식을 제출하기 전에 true 또는 false를 반환하고 실제 유효성 검사를 실행합니다.
답변
이것을 _Layout.cshtml에 추가하십시오.
$(function () {
//parsing the unobtrusive attributes when we get content via ajax
$(document).ajaxComplete(function () {
$.validator.unobtrusive.parse(document);
});
});
답변
놀랍게도이 질문을 보았을 때 공식 ASP.NET 문서에는 여전히 눈에 잘 띄지 않는 parse()
방법이나 동적 콘텐츠와 함께 사용하는 방법 에 대한 정보가 없었 습니다. 나는 문서 리포지토리 (@Nadeem의 원래 답변 참조)에서 문제 를 만들고 풀 요청을 제출 하여 문제 를 해결할 자유를 얻었 습니다. 이 정보는 이제 모델 유효성 검사 항목 의 클라이언트 측 유효성 검사 섹션에 표시됩니다 .
답변
이것을 테스트하십시오 :
if ($.validator.unobtrusive != undefined) {
$.validator.unobtrusive.parse("form");
}
답변
나는 같은 문제에 부딪 혔고 이것 외에는 아무것도 작동하지 않았습니다.
$(document).ready(function () {
rebindvalidators();
});
function rebindvalidators() {
var $form = $("#id-of-form");
$form.unbind();
$form.data("validator", null);
$.validator.unobtrusive.parse($form);
$form.validate($form.data("unobtrusiveValidation").options);
}
그리고 추가
// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
return;
양식을 저장하려는 위치.
Ajax 호출을 통해 양식을 저장했습니다.
이것이 누군가를 도울 수 있기를 바랍니다.
답변
모달 코드 끝에서이 코드를 다시 복사하십시오.
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
😉