0

我有以下如何驗證動態行+選擇與JavaScript選擇?

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> 
+0

您想使用哪個validaor? – Arkni

+0

它可以是手動的javascript或bootstrapValidator/jqValidator – manojgolty

回答

1

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

在你的小提琴,當你生成你的選擇字段,你應用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' 
      } 
     } 
    });