2

我有以下表格：

在此处输入图像描述

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

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

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

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

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

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

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

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

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

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

jsFiddle 模板

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

提前致谢。

4

1 回答 1

0

我从修改 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/

于 2012-10-25T02:43:30.863 回答