如何验证动态行+选择与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' 
      } 
     } 
    });