使用＆＃34; formvalidation.io＆＃34;验证动态输入。

Question

我正在使用插件Form Validation来验证表单。这个插件工作得很棒。
但我在验证动态生成的输入方面遇到了问题。

下面的代码用于动态生成输入字段

$("#countaccmp").change(function() {
  var selVal = $(this).val();
  $("#textboxDiv").html('');
  if(selVal > 0) {
    for(var i = 1; i<= selVal; i++) {
        $("#textboxDiv").append('<input type="text" name="accmp'+i+'" 
        id="accmp'+i+'" class="form-control " />');
    }
  }       
})

我尝试使用插件进行验证，如下所示：

$('#form').formValidation({
       //--------- Plugin Validator Method -----------//
})
.on('change', '[name="countaccmp"]', function(e) {
        //---- Wrote validation here, It works(only on change) but form is getting submitted 
               even after error ----//
       $('.dynDiv').each(function(){
          var input = $(this).children('input');
          var dynField = 
           ($(this).find("input[name^='accmp']").attr('name'));

            if(input.val() == '' || input.val() == undefined){
                alert("Error");
                return false;
            }
 })
 .on('success.form.fv', function(e) {
         //---- Wrote validation here, It works but form is getting 
                submitted even after error ----//
          Same Validation As above
  })

请让我知道解决方案。

Answer 1

您应该将输入添加到插件中以便进行验证。

为此，请使用addField方法，请参阅下面的内容：

$("#countaccmp").change(function () {
    var selVal = $(this).val();
    $("#textboxDiv").html('');
    if (selVal > 0) {
        for (var i = 1; i <= selVal; i++) {
            var input = ''
                + '<div class="form-group">'
                + '    <label class="col-sm-3 control-label" for="accmp' + i + '">Accmp ' + i + '</label>'
                + '    <div class="col-sm-5">'
                + '        <input type="text" name="accmp' + i + '" id = "accmp' + i + '" class = "form-control " / >'
                + '    </div>'
                + '</div>';
            $("#textboxDiv").append(input);
            $('#defaultForm').formValidation('addField', 'accmp' + i, {
                validators: {
                    // Here, add your field validators.
                }
            });
        }
    }
});

演示：

• http://jsfiddle.net/Arkni/fpps1dqn/

参考文献：

• addField文档：http://formvalidation.io/api/#add-field
• 使用addField的示例：http://formvalidation.io/examples/adding-dynamic-field/