Question

我有以下表格：

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

现在，此验证后不再表现良好。它仍然验证形式，但我得到奇怪的结果。有时来自filed3的onsubmit值被移动到field2，并且规则也在字段之间传递......

我想我需要告诉验证员已添加新字段，但我不知道如何？

Answer 1

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

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

<强> http://jsfiddle.net/WVbmj/

引用OP：

它仍然验证形式，但我得到奇怪的结果。有时提交来自filed3的值被移动到field2，规则在它们之间传递领域也是如此。

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

当id问题得到修复时，再次正常工作： http://jsfiddle.net/WVbmj/

Answer 2

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

我们需要为每个追加操作重复此操作..

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

有关详情，请点击此处http://www.dotnetqueries.com/Article/136/jquery-validate-dynamically-added-fields

Answer 3

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

例如：

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

jQuery验证，包含动态添加到表单的字段

3 个答案: