5

我有以下表格：

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
</form>

使用 jQuery 验证插件进行验证。我这样称呼它：

$(".form-validation").validate();

验证按预期工作。然后我有一个按钮，可以动态地将字段添加到表单中，基本上它创建了这个：

<form class="form-validation">
  <input name="product[0][name]" id="form_product[0][name]" data-rule-required="true">
  <input name="product[1][name]" id="form_product[1][name]" data-rule-required="true">
  <input name="product[2][name]" id="form_product[2][name]" data-rule-required="true">
  ...
</form>

现在，在此验证之后不再表现正常。它仍然可以验证表单，但我得到了奇怪的结果。有时，来自字段 3 的 onsubmit 值被移动到字段 2，并且规则也在字段之间传递......

我想我需要告诉验证器已经添加了新字段，但我不知道怎么做？

4

3 回答 3

4

要将规则应用于动态创建的字段，您将在创建新输入字段后立即调用该rules('add')方法。由于您没有显示任何添加新字段的代码，因此我无法向您展示该技术的确切演示。

但是，由于您的规则已经是 HTML 属性的一部分，因此下面的演示表明您的代码应该已经可以正常工作：

http://jsfiddle.net/WVbmj/

引用操作：

它仍然可以验证表单，但我得到了奇怪的结果。有时，来自字段 3 的 onsubmit 值被移动到字段 2，并且规则也在字段之间传递。

这可能是因为您的第二个和第三个元素 上有重复id的 , 。's 必须是唯一的，否则你会得到这样奇怪的结果。像我在上面的演示中那样解决这个问题。id="form_product[1][name]"inputid

同样，当这个问题得到解决 时，它就可以工作了：http: //jsfiddle.net/WVbmj/id

于 2013-04-04T01:55:54.177 回答
0

为了验证动态字段，我们需要将类添加到动态控件并将规则附加到它

我们需要为每个附加操作重复这个..

<input id="Name" name="Name" type="text" class="netEmp form-control">

有关更多信息，请单击此处http://www.dotnetqueries.com/Article/136/jquery-validate-dynamically-added-fields

于 2017-08-16T08:18:44.137 回答
0

您应该为所有字段设置相同的类名。

例如：

<input class="form-control amount validate_form" name="amount[]" type="text">
<p class="validateError" style="color:red;display:none;">please enter amount.</p>
<button type="submit" id="fees_stream_submit" class="btn btn-primary">Submit</a>

<script type="text/javascript">
            $(document).on('click', '#fees_stream_submit', function(e){
              e.preventDefault();
                $(".validate_form").each(function() {
                    var selectedTr = $(this);
                    i =0;
                    var value = $(this).val();
                    if (!value) {
                        selectedTr.next("p").show();
                        i++;
                    } else {
                        selectedTr.next("p").hide();
                    }
                });

                if (i == 0) {
                    $('#fees_stream_form').submit();
                }
            });
        </script>
于 2017-10-07T11:01:21.417 回答