如何驗證動態行+選擇與JavaScript選擇？

Question

我有以下

http://jsfiddle.net/manojgolty/65xcgaq0/1/

// Chosenify every multiple select DOM elements with class 'chosen' 
    $('.chosen-selects').chosen({ 
     width: '100%', 
     allow_single_deselect : true, 
     no_results_text : 'Oops, No Results Found for - ' 
    }); 

---

Here is the problem. 
<i>how to validate the dynamically created row using javascript.. 

Please provide solution even in the jquery as well. 

Thanks for your guidance.</i> 

Answer 1

的代碼我從來沒有用過JQBootstrapValidator，但你可以使用這些驗證之後，而不是一個：

• BootstrapValidator（不再編程和維持）
• FormValidation（新Bootstrapvalidator從v0.6.0的名字，這是一個商業產品）
• JQuery-validation。

在你的小提琴，當你生成你的選擇字段，你應用Chosen插件您select場，只是在這之後你select字段添加到使用驗證，請參見下面的代碼：

＃使用BootstrapValidator（v0.5.2或0.5.3）

$clone.find('select').each(function() { 
    // ... 
    $(this).chosen({ 
     // ... 
    }); 
    // <=== Here add your field to BootstrapValidator 
    // Revalidate your field when it is changed 
    $(this).change(function(e) { 
     $('#yourForm').bootstrapValidator('revalidateField', $(this)); 
    }); 
    // Add it using the `rules` method 
    $('#yourForm').bootstrapValidator('addField', $(this), { 
     validators: { 
      notEmpty: { 
       message: 'Please select an option' 
      } 
     } 
    }); 
    // ===> 
}).end() 

，然後調用驗證：

$('#yourForm') 
    .find('.chosen-selects') 
     .chosen({ 
      width: '100%', 
      allow_single_deselect : true, 
      no_results_text : 'Oops, No Results Found for - ' 
     }) 
     // Revalidate your field when it is changed 
     .change(function(e) { 
      $('#yourForm').bootstrapValidator('revalidateField', 'your_field_name'); 
     }) 
     .end() 
    .bootstrapValidator({ 
     excluded: ':disabled', // <=== make sure to use this option 
     feedbackIcons: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      your_field_name: { 
       validators: { 
        notEmpty: { 
         message: 'Please choose an option' 
        } 
       } 
      } 
     } 
    }); 

＃使用FormValidation（v0.6.0及以上）

$clone.find('select').each(function() { 
    // ... 
    $(this).chosen({ 
     // ... 
    }); 
    // <=== Here add your field to FormValidation 
    // Revalidate your field when it is changed 
    $(this).change(function(e) { 
     $('#yourForm').formValidation('revalidateField', $(this)); 
    }); 
    // Add it using the `rules` method 
    $('#yourForm').formValidation('addField', $(this), { 
     validators: { 
      notEmpty: { 
       message: 'Please select an option' 
      } 
     } 
    }); 
    // ===> 
}).end() 

然後調用驗證器：

$('#yourForm') 
    .find('.chosen-selects') 
     .chosen({ 
      width: '100%', 
      allow_single_deselect : true, 
      no_results_text : 'Oops, No Results Found for - ' 
     }) 
     // Revalidate your field when it is changed 
     .change(function(e) { 
      $('#yourForm').formValidation('revalidateField', 'your_field_name'); 
     }) 
     .end() 
    .formValidation({ 
     framework: 'bootstrap', 
     excluded: ':disabled', // <=== make sure to use this option 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      your_field_name: { 
       validators: { 
        notEmpty: { 
         message: 'Please choose an option' 
        } 
       } 
      } 
     } 
    }); 

＃使用jquery驗證

$clone.find('select').each(function() { 
    // ... 
    $(this).chosen({ 
     // ... 
    }); 

    // <=== Here add your field to Jquery-validation 
    // Revalidate your field when it is changed 
    $(this).change(function(e) { 
     $(this).valid(); 
    }); 
    // Add it using the `rules` method 
    $(this).rules("add", { 
     required: true, 
     messages: { 
      required: "Please select an option" 
     } 
    }); 
    // ===> 
}).end() 

然後調用驗證器：

$('#yourForm') 
    .find('.chosen-select') 
     // Revalidate your field when it is changed 
     .change(function(e) { 
      $(this).valid(); 
     }) 
     .end() 
    .validate({ 
     ignore: ":hidden:not(select)", // <=== make sure to use this option 
     rules: { 
      your_initial_select_field: { 
       required: true 
      } 
     }, 
     messages: { 
      your_initial_select_field: { 
       required: 'Please select an option' 
      } 
     } 
    });