Thêm quy tắc trình xác thực jQuery vào các phần tử được tạo động trong ASP

Question

Tôi có một số trường biểu mẫu được chèn động trên một trang trong dự án MVC3. Thông thường chúng ta sẽ thêm phía máy chủ xác nhận hợp lệ của jQuery, nhưng trong trường hợp này chúng ta không thể (nhiều trường trong giao diện người dùng tạo giá trị cho một trường ẩn - và đây là những gì được gửi. Chúng tôi không thể xác thực đối với trường bị ẩn, vì vậy chúng tôi thay vì phải thêm xác nhận UI chỉ dành cho các lĩnh vực người dùng có thể nhìn thấy)

Khi các lĩnh vực được tự động thêm vào trang, tôi chạy đoạn mã sau trong container:

$container.find(".date").rules("add", { 
    required: true, 
    messages: { 
     required: "The date is required" 
    } 
}); 

Nhưng nó doesn 't làm việc! Thật kỳ lạ, vô hiệu hóa mã trên, tạo các phần tử động, sau đó chạy mã trong giao diện điều khiển JS của trình duyệt hoạt động, nhưng chỉ thông báo xác thực mặc định mới hiển thị.

Tôi đang thua lỗ. Bất kỳ ý tưởng?

Tôi đang sử dụng jQuery Validation 1.9.0 & plugin không phô trương

Answer 1

Bây giờ tôi hiểu những gì đang xảy ra với phía Plugin Không phô trương của sự vật (trong đó Tôi hiểu là liên quan đến ASP.NET bằng cách nào đó), đây là những gì bạn cần làm:

Sau khi bạn thêm phần tử mới, hãy gọi $.validator.unobtrusive.parseElement(newElement) và nó sẽ được thêm vào biểu mẫu. Theo câu trả lời của bạn, bạn cần đặt các thuộc tính data-val và data-val-required trong phần tử biểu mẫu mới.

Vì vậy, bạn kết thúc với điều này:

//create new form element 
$('form fieldset').append('<br>New Field: '+ 
    '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+ 
    ' * Also required'); 

//add new rules to it 
$.validator.unobtrusive 
    .parseElement($('form').find('input[name="newField"]').get(0)); 

Trên đây: http://jsfiddle.net/ryleyb/LNjtd/2/

Answer 2

Khi nó quay ra, điều này có thể được thực hiện chủ yếu trong HTML bằng cách thêm một vài thuộc tính cho mỗi nguyên tố có dạng:

• Một name thuộc tính
• data-val="true"
• data-val-required="message"

Giống như vậy:

<input type='text' name="date" data-val="true" data-val-required="A date is required." /> 

Sau đó, hình thức chỉ cần được tái phân tích cú pháp thông qua JS:

//Remove current form validation information 
$("form") 
    .removeData("validator") 
    .removeData("unobtrusiveValidation"); 

//Parse the form again 
$.validator 
    .unobtrusive 
    .parse("form"); 

Answer 3

Tôi nghĩ rằng bạn có một cái gì đó đơn giản hơn sai - như find('.date') của bạn đã không thực sự tìm kiếm bất cứ điều gì. Bởi vì nếu không, mã của bạn trông khá hợp lý với tôi. Dưới đây là một ví dụ của nó làm việc như bạn mong đợi: http://jsfiddle.net/ryleyb/LNjtd/

tôi đã có thể để xác thực mã một cách chính xác với điều này:

$('form fieldset') 
    .append('<br>New Field: <input type="text" name="newField"> * Also required') 
    .find('input[name="newField"]').rules('add', { 
     required: true, 
     messages: { 
     required: 'New field is required' 
     } 
    } 
);​