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

Question

我有以下表格：

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

• 至少要完成一行name、email输入（按完成按钮时form不能为空）。

  李>

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

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

---

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

然后捕获带有文本的 name 输入并创建一个 jQuery.validate 实例以使用它们的 email 输入来验证这些名称。

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

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

（我不确定我是否清楚自己要做什么，但如果有不清楚的地方，请发表评论并询问我）。

---

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

jsFiddle template

---

只是要知道，html 可以修改，如果你们知道另一种方法或插件，请建议它。

提前致谢。

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 上添加了课程。这是一个有用的技术。您可以使用 $(".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/