jQuery सत्यापन प्लगइन गतिशील रूप से बनाए गए फॉर्म तत्वों को मान्य नहीं करता

Question

मेरे पास एक ऐसा फॉर्म है जहां आप गतिशील रूप से इनपुट तत्वों के साथ नई पंक्तियां जोड़ सकते हैं। मेरा फॉर्म जमा करने से पहले इसे http://jqueryvalidation.org/ से प्लगइन का उपयोग करके मान्य किया जाता है। वर्तमान इनपुट तत्वों के साथ एक नई पंक्ति जोड़ने के लिए कोड इस तरह दिखता है:

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'); 
    }); 
} 

अपने दस्तावेज़ तैयार घटना में मैं बहुत की तरह JQuery सत्यापन प्लगइन प्रारंभ:

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

अब मेरी वास्तविक समस्या है, कि नए इनपुट फ़ील्ड में से कोई भी मान्य नहीं हो जाता है। मुझे पता है कि मैं सर्वर-साइड पर फ़ॉर्म को आसान तरीके से संभालने के लिए इनपुट सरणी का उपयोग कर रहा हूं। क्या ये arrays समस्या है क्यों मेरे इनपुट फ़ील्ड मान्य नहीं है?

संपादित करें - मेरे वर्तमान समाधान:

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++; 
} 

एक आकर्षण की तरह काम करता है!

Answer 1

नए तत्वों के नियमों को जोड़ने के लिए आप जिस तर्क का उपयोग कर रहे हैं उसके साथ कुछ भी गलत नहीं लगता है। हालांकि, आपको jQuery ऑब्जेक्ट पर jQuery चयनकर्ता का उपयोग करके .rules() विधि को संलग्न करने की आवश्यकता होगी, तत्व के HTML नहीं।

कुछ की तरह ...

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

या ...

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

लेकिन आपकी समस्या के दिल में है ... यहाँ

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>'); 

सूचना name विशेषता ? यह हर नई पंक्ति के लिए समान होगा।

समस्या यह है कि jQuery मान्य प्लगइन जब तक प्रत्येक input तत्व एक अद्वितीयname शामिल काम नहीं करेगा है। प्रत्येक नए तत्व के लिए एक नया name बनाया गया है यह सुनिश्चित करने के लिए बस अपने कोड को संशोधित करें।

Answer 2

यह का डुप्लिकेट हो सकता है:

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

लंबी कहानी संक्षेप में, आप

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

http://validation.bassistance.de/rules

कॉल करनी होगी

या, अद्यतन,

http://jqueryvalidation.org/rules

एक तरफ ध्यान दें के रूप में: जब से तुम JS से HTML का एक बहुत इंजेक्षन यह एक अच्छा विचार एक टेम्पलेट इंजन की कोशिश करने का हो सकता है।