javascript - jQuery.validate，具有多个条件的表单

Question

我有以下形式:

似乎很容易验证，但现在我有一些条件:

• 必须至少完成一行name,email输入(form按 完成按钮)。

• 如果用户完成1、2 或所有行的name、email 输入， form 必须验证用户在按下 Finish 按钮时完成的行。

(只是要知道，验证将在按下“完成”按钮时发生。这就是我删除实时验证的原因，请查看末尾 jsFiddle 模板链接中我的代码的第一行我的帖子)。

---

好吧，为了实现这一点，我的第一个想法是检测哪些 name 输入有文本。

然后用文本捕获 name 输入并创建一个 jQuery.validate 实例来验证这些名称及其 email 输入。

问题是我不知道如何声明我的 form 的 jQuery.validate 只验证用户已完成的行。考虑到用户可以按任何顺序完成行并随时清除它们，这似乎很难做到。这意味着验证必须更改并且之前的错误消息必须消失。

这是我现在得到的: jsFiddle example 但看起来很乱，最好知道是否有 jQuery.validate 方法来实现这种 form 验证。

(我不确定我是否清楚我正在尝试做的事情，但如果有什么不清楚，请发表评论并问我)。

---

如果有人想帮忙，我制作了这个模板:

jsFiddle template

---

只是想知道，html 是可以修改的，如果你们知道另一种方法或插件，也可以提出建议。/p>

提前致谢。

Answer 1

我从修改 HTML 部分开始。我添加了类，但更重要的是，我在输入上添加了数据集。

<form id="inviteForm" action="" method="POST">
    <table>
        <tr class="sets set-1">
            <td>Name: <input data-set="1" class="input-name" name="name_1" type="text" value=""/></td>
            <td>E-mail: <input data-set="1" class="input-email" name="email_1" type="text" value=""/></td>
        </tr>
        <tr class="sets set-2">
            <td>Name: <input data-set="2" class="input-name" name="name_2" type="text" value=""/></td>
            <td>E-mail: <input data-set="2" class="input-email" name="email_2" type="text" value=""/></td>
        </tr>
        <tr class="sets set-3">
            <td>Name: <input data-set="3" class="input-name" name="name_3" type="text" value=""/></td>
            <td>E-mail: <input data-set="3" class="input-email" name="email_3" type="text" value=""/></td>
        </tr>
        <tr class="sets set-4">
            <td colspan="2"><input type="submit" value="Finish"/></td>
        </tr>
    </table>
</form>​

我还在 TR 上添加了类(class)。这是一个有用的技术。您可以使用 $(".sets") 调用所有 TR，或者使用 $(".set-1") 调用特定的 TR。您将在下面看到为什么这很有用。

然后，我为规则声明了一个默认变量。

var defaultrules = {
        name: {
            required: true,
            minlength: 2,
            maxlength: 50,
            messages: {
                required: "*",
                minlength: jQuery.format("Min. {0} characters"),
                maxlength: jQuery.format("Max. {0} characters")
            }
        },
        email: {
            required: true,
            email: true,
            minlength: 5,
            maxlength: 150,
            messages: {
                required: "*",
                email: "Invalid format",
                minlength: jQuery.format("Min. {0} characters"),
                maxlength: jQuery.format("Max. {0} characters")
            }
        }
    }

最后，我听取了有关更改的意见。当输入发生变化时，我只是将规则添加到验证中

$("#inviteForm input").on("change", function() {
        var ele = $(this);

        // Get the set!
        cur_set = ele.data("set");

        // Is it filled? 
        if (ele.val().length > 0) {
            // Add the rules to the current set, to the corresponding inputs
            $(".set-"+cur_set).find(".input-name").rules('add', defaultrules.name)
            $(".set-"+cur_set).find(".input-email").rules('add', defaultrules.email)
        }
    })

这是工作中的 jsFiddle:http://jsfiddle.net/maktouch/DC8eJ/1/