【问题标题】:Validate that at least one check box is checked using jquery validate使用 jquery validate 验证是否选中了至少一个复选框
【发布时间】:2019-08-27 21:13:26
【问题描述】:

我想验证是否选中了一组复选框中的至少一个复选框。

This 答案让我非常接近我需要的东西,但问题是我不想更改 html 中的 name 属性,因为在我的情况下,名称是唯一的并且对数据绑定至关重要。

我也尝试了以下方法,但它导致需要每个复选框而不是一个或多个。

$('.chkbox').each(function(){
       $(this).rules("add", {
            required: true,
            messages: {
                required: "Select 1 or more categories."
            }
        })
    });

编辑 - 这是单个复选框的 HTML 标记

<div class="form-control">
    <input id="DocTypesGroup_0__IsSelected" name="DocTypesGroup[0].IsSelected" type="checkbox" value="true">
    <input name="DocTypesGroup[0].IsSelected" type="hidden" value="false">
    <label>
        Type 1
    </label>
    <br>
</div>

【问题讨论】:

  • 我们可以看到标记吗?了解“添加”应用于什么以及元素的层次结构会有所帮助。另外,您是否可以使用隐藏输入来检查是否选中了任何复选框,然后将规则应用于隐藏输入?
  • @JoeFitzsimmons 我添加了 html 标记。我喜欢跟踪复选框是否被选中的隐藏输入的想法。我会尝试并回来查看。

标签: jquery jquery-validate


【解决方案1】:

根据对问题的有用评论,让它为我的目的工作。

我添加了一个隐藏字段

<input type="hidden" id="CategoryTrack" name="CategoryTrack" />

并使用一些 jquery 代码来跟踪我的复选框,并设置隐藏字段的值

$('.chkbox[type=checkbox]').click(function () {
    var i = 0;

    $('.chkbox[type=checkbox]').each(function () {
        if (this.checked) {
            i++;
        }
    });

    if (i > 0) {
        $('#CategoryTrack').val(true);
    }
    else {
        $('#CategoryTrack').val('');
    }

    $("#Form").valid();
});

最后,这里是验证方法

$('#BriefForm').validate({
        ignore: [], //need this to validate hidden fields
        ...
        rules: {
            'CategoryTrack': {
                required: true
            }
        },
        messages: {
            'CategoryTrack': 'At least one category must be checked'
        }
    });

我加入这个是为了注意默认情况下,隐藏字段不会被验证。所以不要忘记包含ignore: [] 这一行。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多