如何使用jquery validate進行最少輸入的驗證？

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/

我想使驗證動態

如果用戶未輸入任何內容，則用戶提交，將顯示一條消息“最少1次輸入”

如果用戶在一個文本框中輸入並提交，則它將成功。

我創建的代碼仍然不完美

如果用戶在一個文本框中輸入內容然后提交，則仍然顯示消息“最少1個輸入”。 應該沒有訊息

如何改善我的代碼？

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規則是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/

如果您不喜歡此消息在表單上的放置，請使用errorPlacement選項 。

請閱讀此插件的在線文檔 。