눈에 잘 띄지 않는 유효성 검사가 동적 콘텐츠로 작동하지 않음

Question 1

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")); 새로로드 된 컨트롤에 대해 유효성 검사기에게 허용하기에 충분한 호출을 합니다.

누구든지 도울 수 있습니까?

Question 2

이미 구문 분석 된 양식을 구문 분석하려고하면 업데이트되지 않습니다.

양식에 동적 요소를 추가 할 때 수행 할 수있는 작업은

양식의 유효성 검사를 제거하고 다음과 같이 다시 유효성을 검사 할 수 있습니다.

var form = $(formSelector)
    .removeData("validator") /* added by the raw jquery.validate plugin */
    .removeData("unobtrusiveValidation");  /* added by the jquery unobtrusive plugin*/

$.validator.unobtrusive.parse(form);

unobtrusiveValidationjquery data메서드를 사용하여 양식의 데이터에 액세스합니다 .
```
$(form).data('unobtrusiveValidation')
```
그런 다음 규칙 컬렉션에 액세스하고 새 요소 속성 (다소 복잡함)을 추가합니다.

양식에 동적 요소를 추가하는 데 사용되는 플러그인에 대해 ASP.Net MVC의 동적 콘텐츠에 눈에 띄지 않는 jquery 유효성 검사 적용 에 대한이 문서를 확인할 수도 있습니다 . 이 플러그인은 두 번째 솔루션을 사용합니다.

Question 3

Nadeem Khedr의 답변에 추가로 ....

DOM에 양식을 동적으로로드 한 다음

jQuery.validator.unobtrusive.parse(form);

(추가 비트가 언급되어 있음) 그런 다음 ajax를 사용하여 해당 양식을 제출할 것입니다.

$(form).valid()

양식을 제출하기 전에 true 또는 false를 반환하고 실제 유효성 검사를 실행합니다.

Question 4

이것을 _Layout.cshtml에 추가하십시오.

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });

Question 5

놀랍게도이 질문을 보았을 때 공식 ASP.NET 문서에는 여전히 눈에 잘 띄지 않는 parse()방법이나 동적 콘텐츠와 함께 사용하는 방법 에 대한 정보가 없었 습니다. 나는 문서 리포지토리 (@Nadeem의 원래 답변 참조)에서 문제 를 만들고 풀 요청을 제출 하여 문제 를 해결할 자유를 얻었 습니다. 이 정보는 이제 모델 유효성 검사 항목 의 클라이언트 측 유효성 검사 섹션에 표시됩니다 .

Question 6

이것을 테스트하십시오 :

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}

Question 7

나는 같은 문제에 부딪 혔고 이것 외에는 아무것도 작동하지 않았습니다.

$(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 호출을 통해 양식을 저장했습니다.

이것이 누군가를 도울 수 있기를 바랍니다.

Question 8

모달 코드 끝에서이 코드를 다시 복사하십시오.

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)