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

Question

我有以下表格：

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

• 至少必须有一行name ， email输入必须完成（按“ 完成”按钮时， form不能为空）。

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

（只需知道，验证将在按下“完成”按钮时进行。这就是为什么我删除了实时验证的原因，请查看文章结尾处jsFiddle模板链接中代码的第一行）。

---

好吧，要实现这一目标，我的第一个想法是检测哪些name输入包含文本。

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

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

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

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

---

如果有人想提供帮助，我制作了此模板：

jsFiddle模板

---

要知道，可以对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/