Jquery 验证插件 - 验证正在添加的字段

Question

我需要有关 jQuery 验证的帮助。基本上，当我尝试提交表单时，我有几个静态字段并且验证工作正常。但是，我有一个动态添加/删除字段，我不知道谁来捕获 elementID 并对其进行验证。让我解释一下这个问题。

我有 3 个静态字段成本、类型和区域。并且以下验证在这些字段中正常工作。

$("#form1").validate({
    rules: {
        Cost: {
            currency: true
        },

        Type: {
            required: true  
        },

        Region: {
            required: true  
        }

    }
});

现在，我有一个按钮可以为文本框添加（也有逐行删除选项），这个添加功能也可以正常工作。

<input type="button" name="AddIssue" id="AddIssue" value="Add Issue"  class="button2"/>

当点击 AddIssue 按钮时，将添加以下文本框，并且每个正在添加的文本框的 elementID 不断增加，如下例所示。

<input type="text"  id="Issue_1" name="Issue_1" size="5" value="" />
<input type="text"  id="Issue_2" name="Issue_2" size="5" value="" />
<input type="text"  id="Issue_3" name="Issue_3" size="5" value="" />
<input type="text"  id="Issue_4" name="Issue_4" size="5" value="" />

我想在 jQuery 验证中包含任何元素 ID，如“Issue_”，并检查该值是否为空。我该怎么做？

请帮忙。谢谢！

Answer 1

将required 类添加到新元素中：

<input type="text" id="Issue_1" name="Issue_1" size="5" value="" class="required" />

jquery-validate` 自动识别符合其验证规则的类名并应用它们。

Answer 2

假设它是JQuery Validate Plugin，我认为下面将是处理它的最佳方式，它允许动态生成输入，如果您希望应用自定义消息和/或附加选项使用的规则。

如果您只是希望它是必需的，class="required" 将按照其他答案中列出的方式执行此操作。

PER THE DOCS

示例：添加一个名为“name”的新复合规则，替换 class=”required” minlength=”2″ with class=”name”。

当前代码

$("#form1").validate({
    rules: {
        Cost: {
            currency: true
        },

        Type: {
            required: true  
        },

        Region: {
            required: true  
        }

    }
});

添加代码

jQuery.validator.addClassRules("issue", {
  required: true,
  minlength: 2
});

有了这个，我们可以在所有客户字段中添加一个类客户并完成它：

因此，您的输入将需要像这样应用一个类。

<input type="text"  id="Issue_1" name="Issue_1" size="5" value="" class="issue"/>
<input type="text"  id="Issue_2" name="Issue_2" size="5" value="" class="issue"/>
<input type="text"  id="Issue_3" name="Issue_3" size="5" value="" class="issue"/>
<input type="text"  id="Issue_4" name="Issue_4" size="5" value="" class="issue"/>

然后您可以在该类中添加您想要的任何输入，它将根据“问题”ClassRules 进行验证。

JSFIDDLE