Plugin trình xác nhận Jquery không kiểm tra các đầu vào mới

Question

Xin chào, tôi sử dụng trình xác thực jQuery cho một biểu mẫu. Nó đã hoạt động tốt đẹp cho đến ngày hôm nay. Tôi đã thêm một mã mới mẫu mà thêm/gỡ bỏ các trường bổ sung mẫu (với các lớp học thiết lập để "yêu cầu") ..

cơ bản dưới hình thức là một số điều như>

<form name="form" id="form"> 
    <input name="text1" class="required"> 
    <a id="addnew">Add new text</a> 
<div id="newitems"></div> 
    <submit> 
    </form> 

Code tôi sử dụng là

<script type="text/javascript"> 
     $(document).ready(function({ $("#form").validate(); 
     $("#addnew").click(function({ 
     $("#newitems").append('<input class="required" name="newinput">'); 
}); }); 
</script> 

ý tưởng là khi ai đó click vào Thêm văn bản mới bên trong mẫu được bổ sung thêm một lĩnh vực mới. Vấn đề của tôi là sau đó Validator không hoạt động trên trường mới vì nó đã được nạp cho biểu mẫu .. Làm thế nào tôi có thể đặt javascript để kiểm tra và các trường mới?

tôi đã không sao chép mã chính xác của trang web của tôi vì nó rất dài ..

This Is the validation plugin - its the most used validator on jquery

Answer 1

Khi tạo phần tử biểu mẫu mới, bạn cần thông báo cho plugin xác thực để kiểm tra bằng cách thêm quy tắc. Việc thêm lớp 'required' vào một phần tử chỉ cảnh báo cho plugin nếu phần tử có mặt trên tải tài liệu. Hãy thử điều này:

$(document).ready(function({ 
     $("#form").validate(); 
     $("#addnew").click(function({ 
      var input = $("<input />").attr("name", "newinput"); 
      $("#newitems").append(input); 
      input.rules('add', {'required': true}) 
     }); 
    }); 

Answer 2

nếu bạn đang thêm nội dung động bất kỳ hiện không ảnh hưởng đến các điều khiển mới. bạn phải gán lại sự kiện sau khi sửa đổi dom. vì vậy hãy gọi trình xác nhận lại một lần nữa sửa đổi afer dom.

Answer 3

Bạn phải liên kết lại sự kiện sau khi tải nội dung động.

nếu bạn đang thêm nội dung động, bất kỳ nội dung hiện tại nào không ảnh hưởng đến các điều khiển mới. bạn phải gán lại sự kiện sau khi sửa đổi dom. vì vậy hãy gọi trình xác nhận lại một lần nữa sửa đổi afer dom.

Nếu bạn muốn rebind chỉ cần gọi một lần nữa

$("#addnew").click(function({ 
     $("#newitems").append('<input class="required" name="newinput">'); 
     }); 

Bạn cũng có thể đặt nó trong một hàm

function rebindit() { 
$("#addnew").click(function({ 
    $("#newitems").append('<input class="required" name="newinput">'); 
    }); 
} 

và mỗi lần thay đổi nội dung của bạn gọi rebindit();

Answer 4

Có sự kiện onchange trong javascript được kích hoạt khi nội dung của trường thay đổi. Bạn cũng có thể sử dụng nó trên trường mới để xác thực lịch phát sóng cho trường đó.