如何使用 jquery 验证以最少的一次输入进行验证？

Question

我的 html 代码是这样的：

<form method="post" id="form-product">
    <input type="text" id="test-1" name="test[1]" /><br>
    <input type="text" id="test-2" name="test[2]" /><br>
    <input type="text" id="test-3" name="test[3]" /><br>
    <input type="text" id="test-4" name="test[4]" /><br>
    <input type="text" id="test-5" name="test[5]" /><br>
    <button type="submit">Submit</button>
</form>

我的 javascript 代码是这样的：

$(document).ready(function () {
    $('#form-product').validate();
    $('[name^="test"]').each(function () {
        console.log('test')
        $(this).rules('add', {
            required: true,
            messages: {
                required: 'Minimal 1 input'
            }
        });
    });
});

演示和完整代码如下：http://jsfiddle.net/oscar11/XTtTP/6/

我想使验证动态化

如果用户没有输入任何东西然后用户提交，会有一个消息"Minimal 1 input"

如果用户在一个文本框中输入并提交则提交成功。

我创建的代码还不够完美

如果用户在一个文本框中输入然后提交，它仍然有消息"Minimal 1 input"。应该没有消息

我如何改进我的代码？

Answer 1

您的代码使它们成为必需的。如果您只需要组中的一个字段，则需要改用 require_from_group 规则。

$(document).ready(function () {
    $('#form-product').validate();
    $('[name^="test"]').each(function () {
        console.log('test')
        $(this).rules('add', {
            require_from_group: [1, $('[name^="test"]')],
            messages: {
                require_from_group: 'Minimal 1 input'
            }
        });
    });
});

require_from_group 规则是 additional-methods.js 文件的一部分。

演示：jsfiddle.net/nw53mw17/

我还建议您使用最新版本的插件。您的 jsFiddle 使用的是非常老的 1.10，但最新版本是 1.17；这是一个很大的不同。

编辑:

要将邮件分组在一起，请使用 groups 选项。由于您不知道运行前的所有名称，因此使用 .each() 构造此参数。

// dynamically construct groups parameter
var grp = "";
$('[name^="test"]').each(function () {
    grp += $(this).attr('name') + " ";
});
grp = $.trim(grp);
var myGroups = {TESTS: grp};

// intialize plugin with options
$('#form-product').validate({
    groups: myGroups
});

演示 2：jsfiddle.net/nw53mw17/2/

如果您不喜欢此消息在表单中的位置，请使用 the errorPlacement option。

请阅读此插件的 online documentation。

如何使用 jquery 验证以最少的一次输入进行验证？

How can I make validate with minimal one input with jquery validate?

javascript

jquery

jquery-validate