Question

我有以下表格：

enter image description here

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

必须完成至少一行name，email输入（按完成按钮时form不能为空。
如果用户完成 1 ， 2 或所有行name，email输入，form必须按完成按钮验证用户已完成的行。

（只是要知道，验证将在Finish按钮被按下时发生。这就是为什么我删除了实时验证，看看我的代码的第一行在jsFiddle模板链接结束时我的帖子。）

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

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

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

这就是我现在所得到的： jsFiddle example ，但看起来很混乱，最好知道是否有form的方法来实现这种{ {1}}验证。

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

如果有人想要帮助我制作了这个模板：

jsFiddle template

只是要知道，jQuery.validate可以修改，如果你们知道另一种方式或插件，只是建议它。

提前致谢。

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/

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

1 个答案: