如何使用jquery validate进行最少输入的验证？

Question

My html code like this :

<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>

My javascript code like this :

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

Demo and full code like this : http://jsfiddle.net/oscar11/XTtTP/6/

I want to make the validation dynamic

If the user does not enter anything then the user submit, there will be a message "Minimal 1 input"

If user inputs in one textbox and submit then it will succeed.

The code I created is still not perfect

If user input in one textbox then submit, it still have message "Minimal 1 input". There should be no message

How I improve my code?

Answer 1

Your code makes them all required. If you only want one field required out of the group, then you'll need to use the require_from_group rule instead.

$(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'
            }
        });
    });
});

The require_from_group rule is part of the additional-methods.js file.

DEMO: jsfiddle.net/nw53mw17/

I also suggest that you use the latest version(s) of the plugin. Your jsFiddle is using the really old 1.10, but the latest version is 1.17; this is a substantial difference.

---

EDIT :

In order to group the messages together, use the groups option. Since you don't know all the names before runtime, use an .each() to construct this parameter.

// 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
});

DEMO 2: jsfiddle.net/nw53mw17/2/

If you do not like the placement of this message on the form, use the errorPlacement option .

Please read the online documentation for this plugin.