xác thực không phô trương không hoạt động với nội dung động

Tôi đang gặp sự cố khi cố gắng xác thực jquery không phô trương hoạt động với chế độ xem một phần được tải động thông qua lệnh gọi AJAX.

Tôi đã dành nhiều ngày để cố gắng làm cho mã này hoạt động mà không gặp may.

Đây là Chế độ xem:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

Chế độ xem một phần:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

Ngươi mâu:

  public class test
  {
    [Required(ErrorMessage= "required field")]
    public int MyProperty { get; set; }
  }

Bộ điều khiển:

    public ActionResult GetView()
    {
        return PartialView("Test");
    }

và cuối cùng, javascript:

$(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;
    }
});

Việc xác nhận không hoạt động. Ngay cả khi tôi không điền bất kỳ thông tin nào vào hộp thư, sự kiện gửi sẽ hiển thị cảnh báo ('hợp lệ').

Tuy nhiên, nếu thay vì tải động chế độ xem, tôi sử dụng @Html.Partial("test", Model)để hiển thị một phần Chế độ xem trong Chế độ xem chính (và tôi không thực hiện lệnh gọi AJAX), thì việc xác nhận hoạt động tốt.

Điều này có thể là do nếu tôi tải nội dung động, các điều khiển chưa tồn tại trong DOM. Nhưng tôi thực hiện một cuộc gọi đến $.validator.unobtrusive.parse($("#res")); đủ để cho trình xác nhận về các điều khiển mới được tải ...

Có ai giúp được không ?

Nếu bạn cố gắng phân tích cú pháp một biểu mẫu đã được phân tích cú pháp nó sẽ không cập nhật

Những gì bạn có thể làm khi thêm phần tử động vào biểu mẫu là

1. Bạn có thể xóa xác thực của biểu mẫu và xác thực lại nó như sau:

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

2. Truy cập unobtrusiveValidationdữ liệu của biểu mẫu bằng dataphương thức jquery :

   $(form).data('unobtrusiveValidation')

   sau đó truy cập bộ sưu tập quy tắc và thêm các thuộc tính phần tử mới (hơi phức tạp).

Bạn cũng có thể xem bài viết này về Áp dụng xác thực jquery kín đáo cho nội dung động trong ASP.Net MVC cho một plugin được sử dụng để thêm các phần tử động vào biểu mẫu. Plugin này sử dụng giải pháp thứ 2.

Như một phần bổ sung cho câu trả lời của Nadeem Khedr ....

Nếu bạn đã tải động một biểu mẫu vào DOM của mình và sau đó gọi

jQuery.validator.unobtrusive.parse(form); 

(với các bit bổ sung được đề cập) và sau đó sẽ gửi biểu mẫu đó bằng cách sử dụng ajax, hãy nhớ gọi

$(form).valid()

trả về true hoặc false (và chạy xác thực thực tế) trước khi bạn gửi biểu mẫu của mình.

thêm cái này vào _Layout.cshtml của bạn

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

Đáng ngạc nhiên là khi tôi xem câu hỏi này, tài liệu ASP.NET chính thức vẫn không có bất kỳ thông tin nào về parse()phương pháp không phô trương hoặc cách sử dụng nó với nội dung động. Tôi đã tự do tạo vấn đề tại kho tài liệu (tham khảo câu trả lời ban đầu của @ Nadeem) và gửi yêu cầu kéo để khắc phục sự cố. Thông tin này hiện hiển thị trong phần xác thực phía máy khách của chủ đề xác thực mô hình.

kiểm tra cái này:

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

Tôi đã gặp vấn đề tương tự và không có gì hoạt động ngoại trừ điều này:

$(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);
}

và thêm vào

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

nơi bạn đang cố gắng lưu biểu mẫu.

Tôi đã lưu biểu mẫu thông qua cuộc gọi Ajax.

Hy vọng điều này sẽ giúp một ai đó.

chỉ cần sao chép lại mã này vào cuối mã phương thức

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

;)