Xác thực Jquery ASP.NET MVC sẽ không kích hoạt nếu một phần được tải qua ajax

Question

Tôi đang sử dụng tùy chọn xác thực jquery để thực hiện xác thực phía máy khách trên một phần xem. Xem một phần được tải thông qua ajax vào một hộp thoại phương thức bằng cách sử dụng url (gần giống như Html.RenderAction).

Tuy nhiên, khi xem một phần được nạp siêu dữ liệu xác nhận được không phải là đầu ra cho page.Normally bạn sẽ thấy một cái gì đó như thế này:

//<![CDATA[ 
3if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; } 
4window.mvcClientValidationMetadata.push({"Fields":[],"FormId":"form0","ReplaceValidationSummary":false}); 
5//]]> 

Câu hỏi của tôi là rất tương tự như này một ASP.NET MVC 2 loading partial view using jQuery - no client side validation nhưng tôi don 't muốn phải sử dụng xác nhận của Microsoft như tôi đã quen thuộc với jQuery.validate.

Answer 1

Vui lòng kiểm tra liên kết này: Executing Dynamically Loaded JavaScript
Nó chứa các bản sửa lỗi giả sử để thực thi javascript trên chế độ xem một phần được nạp động (thông qua AJAX).

Answer 2

điều gì hiểu được vấn đề của bạn là khi cập nhật một phần trang, các phần tử DOM tương ứng đang được chèn lại tức là chúng mới và không có $ .validate bắt buộc.

Tôi đã nghĩ bạn bằng cách nào đó có thể sử dụng $ .live/$. Livequery để ràng buộc $ .validate đối tượng vào các trường đó vì vậy sau mỗi lần cập nhật một phần mã jquery sẽ khởi tạo lại $ .validate trên các trường đó. Có thể bạn có thể sử dụng một lớp css để đánh dấu các phần tử DOM đó.

Điều tôi đề xuất là loại kết buộc muộn và sử dụng các sự kiện mới hơn liên quan đến chèn DOM.

Hy vọng điều này sẽ giúp ích !!

Answer 3

Tôi đã gặp sự cố tương tự khi tải javascript khi tôi đặt nội dung theo thực tế trong DOM. Bạn chèn nội dung vào DOM như thế nào? Có một số phương pháp trong jQuery mà loại bỏ javascript khi chèn thử sử dụng này:

$("#mydiv").html(newContent); 

Hy vọng điều này sẽ giúp bạn!

Answer 4

Nếu tôi hiểu vấn đề của bạn một cách chính xác thì điều này có thể hữu ích.

Trong ví dụ bên dưới, tôi đang sử dụng Ajax.BeginForm để cập nhật div (id = "div_to_update"), nhưng nó cũng có thể là phương pháp khác.

Điều quan trọng là OnSuccess khởi chạy phương thức bên dưới. Điều đó sẽ cập nhật nội dung div và thực thi tất cả các javascripts bao gồm xác thực jquery của bạn. Ban đầu tôi tìm thấy giải pháp này từ các diễn đàn Telerik.

<div id="div_to_update"> 
<% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { OnSuccess = "updatePlaceholder", UpdateTargetId = "div_to_update", InsertionMode = InsertionMode.Replace }, new { id = "translationAjaxForm" })) 
<% } %> 

<script type="text/javascript"> 
    function updatePlaceholder(context) { 
     // the HTML output of the partial view 
     var html = context.get_data(); 

     // the DOM element representing the placeholder 
     var placeholder = context.get_updateTarget(); 

     // use jQuery to update the placeholder. It will execute any JavaScript statements 
     $(placeholder).html(html); 

     // return false to prevent the automatic update of the placeholder 
     return false; 
    } 
</script> 
</div> 

Answer 5

Có lẽ tôi đang bối rối nhưng bạn có thể chỉ cần gọi xác thực khi gửi và không gửi nếu không thành công?

$(function() { 
    $("form:first").validate({ .. options for validator .. }); 

    $("submit").click(function() { 
     if(!$("form:first").valid()){ 
      return false; 
     } 
     // Submit form here 
    }); 

}); 

Answer 6

Tôi gặp vấn đề tương tự và đây là cách tôi đã giải quyết vấn đề này.

Mở MicrosoftMvcJQueryValidation.js và thực hiện các thay đổi sau.

Thêm chức năng này

function __MVC_ApplyClientValidationMetadata() { 
    var allFormOptions = window.mvcClientValidationMetadata; 
    if (allFormOptions) { 
     while (allFormOptions.length > 0) { 
     var thisFormOptions = allFormOptions.pop(); 
     __MVC_EnableClientValidation(thisFormOptions); 
     } 
    } 
} 

Tìm $ (document).sẵn sàng() và thay thế bằng

$(document).ready(__MVC_ApplyClientValidationMetadata); 

Bây giờ chỉ cần làm như sau

Nếu bạn sử dụng html() sau đó chỉ cần gọi __MVC_ApplyClientValidationMetadata sau khi bạn nạp html vào phần tử.

$("#someDiv").html(responseHtml); 
__MVC_ApplyClientValidationMetadata(); 

Nếu bạn sử dụng tải() thì bạn có vấn đề khác. Nó sẽ loại bỏ tất cả các thẻ script. Vì vậy, bạn phải làm một cái gì đó như sau.

$("#someDiv").load("https://stackoverflow.com/a/partialview/request" , function(response){ 
    var scripts = $(response).filter("script"); 
    for (var i = 0; i < scripts.length; i++) { 
     //executes javascript 
     $.globalEval(scripts[i].text); 
    } 
    __MVC_ApplyClientValidationMetadata(); 
}); 

Một điều nữa. Đảm bảo rằng các biểu mẫu bạn tải bằng ajax có một id duy nhất. Theo mặc định, tất cả các biểu mẫu nhận được một id của form0.

Answer 7

Một phần của sự cố là thực tế là tập lệnh được bao gồm trong phản hồi không được thực thi. Trong trường hợp của tôi, tôi đã phải làm việc với một giải pháp dựa trên jcruz' giải pháp, trong đó lựa chọn kịch bản từ hình thức ajax chắc chắn:

var scripts = $('div#id_of_ajax_form>script'); 
for (var i = 0; i < scripts.length; i++) { 
    //executes javascript 
    $.globalEval(scripts[i].text); 
} 

Phần thứ hai của vấn đề là thực tế là xác nhận microsoft đã được khởi tạo sau được tải bởi một cuộc gọi đến Sys.Mvc.FormContext._Application_Load. Vì vậy, sau khi thực thi kịch bản cần thiết, có chứa thông số kỹ thuật xác nhận trường, tôi gọi cùng một chức năng đang được gọi trên tải tài liệu:

Sys.Mvc.FormContext._Application_Load(); 

hy vọng điều này sẽ giúp. Bất kỳ ý kiến ​​sẽ được đánh giá rất nhiều.