Plugin Xác thực jQuery không xác thực các phần tử biểu mẫu được tạo động

Question

Tôi là một biểu mẫu mà bạn có thể tự động thêm hàng mới bằng các yếu tố đầu vào. Trước khi gửi biểu mẫu của tôi, nó được xác thực bằng cách sử dụng plugin từ đây http://jqueryvalidation.org/. Hiện nay mã để thêm một hàng mới với các yếu tố đầu vào như sau:

function addTimeRow(table, stime) 
{ 
    //var rowIdx = $('#seminarTimes tr').length - 1; 

    var $id = $('<input type="hidden" name="stid[]">'); 
    var $dateField = $('<input type="text" name="date[]" class="input-mini">'); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>'); 
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>'); 

    if (typeof(stime) !== 'undefined') 
    { 
     $id.attr('value', stime.id); 
     $dateField.attr('value', stime.date); 
     $from.attr('value', stime.from); 
     $to.attr('value', stime.to); 
    } 
    else 
     $id.attr('value', -1); 

    // Attach new input row. 
    table 
     .append($('<tr>') 
      .append($id) 
      .append($('<td>') 
       .append($date)) 
      .append($('<td>') 
       .append($from)) 
      .append($('<td>') 
       .append($to)) 
      .append($('<td class="vert">') 
       .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">')))); 

    // Attach rules. 
    $dateField.rules('add', { required: true }); 
    $from.rules('add', { required: true }); 
    $to.rules('add', { required: true }); 

    // Create pickers. 
    $date.datepicker({ 
     language: 'de', 
     autoclose: true, 
     todayBtn: true, 
     todayHighlight: true, 
    }).on('changeDate', function(e) { 
     editSeminarFormValidator.element($dateField); 
     $date.datepicker('hide'); 
    }); 
} 

Trong trường hợp sẵn sàng tài liệu của tôi, tôi khởi tạo xác nhận Plugin JQuery như vậy:

var validator = $('#editSeminarForm').validate({ 
    debug: true, 
    errorLabelContainer: '#error-label', 
    wrapper: 'li', 
    messages: { 
     price: 'Bitte geben Sie einen Preis ein!' 
    } 
}); 

Bây giờ vấn đề thực tế của tôi là, rằng không có trường nhập mới nào được xác thực. Tôi biết rằng tôi đang sử dụng mảng đầu vào để xử lý dễ dàng biểu mẫu ở phía máy chủ. Những mảng này có phải là vấn đề tại sao các trường nhập của tôi không được xác thực không?

EDIT - giải pháp hiện tại của tôi:

var rowIdx = 0; 
function addTimeRow(table, stime) 
{ 
    var $id = $($.validator.format('<input type="hidden" id="stid{0}" name="stid[{0}]">', rowIdx)); 
    var $dateField = $($.validator.format('<input type="text" id="date{0}" name="date[{0}]" class="input-mini">', rowIdx)); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $($.validator.format('<input type="text" id="from{0}" name="from[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx)); 
    var $to = $($.validator.format('<input type="text" id="to{0}" name="to[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx)); 

    if (typeof(stime) !== 'undefined') 
    { 
     $id.attr('value', stime.id); 
     $dateField.attr('value', stime.date); 
     $from.attr('value', stime.from); 
     $to.attr('value', stime.to); 
    } 
    else 
     $id.attr('value', -1); 

    // Attach new input row. 
    table 
     .append($('<tr>') 
      .append($id) 
      .append($('<td>') 
       .append($date)) 
      .append($('<td>') 
       .append($from)) 
      .append($('<td>') 
       .append($to)) 
      .append($('<td class="vert">') 
       .append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">')))); 

    // Attach rules. 
    $dateField.rules('add', { required: true }); 
    $from.rules('add', { required: true }); 
    $to.rules('add', { required: true }); 

    // Create pickers. 
    $date.datepicker({ 
     language: 'de', 
     autoclose: true, 
     todayBtn: true, 
     todayHighlight: true, 
    }).on('changeDate', function(e) { 
     editSeminarFormValidator.element($dateField); 
     $date.datepicker('hide'); 
    }); 

    rowIdx++; 
} 

trình như một say mê!

Answer 1

Dường như không có gì sai với logic bạn đang sử dụng để thêm quy tắc vào các phần tử mới. Mặc dù, bạn sẽ cần phải đính kèm phương pháp .rules() vào đối tượng jQuery bằng cách sử dụng bộ chọn jQuery , không phải HTML của phần tử.

một cái gì đó giống như ...

$('#myInputID').rules('add', {...}); 

hoặc ...

$('input[name="myname"]').rules('add', {...}); 

Nhưng trung tâm của vấn đề của bạn là ở đây ...

var $id = $('<input type="hidden" name="stid[]">'); 
    var $dateField = $('<input type="text" name="date[]" class="input-mini">'); 
    var $date = $('<div class="input-append date">') 
     .append($dateField) 
     .append('<span class="add-on"><i class="icon-calendar">'); 
    var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>'); 
    var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>'); 

Thông báo các thuộc tính name ? Nó sẽ giống nhau cho mọi hàng mới.

Vấn đề là plugin jQuery Validate sẽ không hoạt động trừ khi mỗi phần tử input chứa duy nhấtname. Chỉ cần sửa đổi mã của bạn để đảm bảo rằng name mới được tạo cho mỗi phần tử mới.

Answer 2

Nó có thể là một bản sao của:

1. Adding jQuery validator rules to dynamically created elements in ASP
2. jQuery - How to dynamically add a validation rule

câu chuyện dài ngắn, bạn phải gọi

$('input').rules('add', 'required') 

http://validation.bassistance.de/rules

hay, cập nhật,

http://jqueryvalidation.org/rules

Như một mặt lưu ý: kể từ khi bạn tiêm rất nhiều HTML từ JS nó có thể là một ý tưởng tốt để thử một mẫu động cơ.