验证至少一个复选框 [英] validation for at least one checkbox

问题描述

我看过其他几篇有同样问题的帖子，但找不到适合我的解决方案，所以我发布了我自己的问题.

I have seen a couple of other posts with the same question but couldn't get the solution to work for me so I'm posting my own question.

让我先说我是 JQuery 和 MVC 的新手.我有 3 个复选框，我需要确保至少选中其中一个.我有一些正在使用 Jquery 自定义验证的东西.但它在验证摘要中显示 3 条消息.我希望它只显示一条消息，如果可能，不在验证摘要中.我怎么能做到这一点?

Let me preface this by saying I'm new to JQuery and MVC. I have 3 checkboxes, and I need to ensure at least one of them is checked. I have something that is working using a Jquery custom validation. But it is displaying 3 messages in a Validation Summary. I want it to display only one message, and if possible not in a validation summary. How could I achieve this?

html 代码

<label for="river1">river1</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The     river1 field is required." id="river1" name="river1" type="checkbox" value="true" />
<input name="river1" type="hidden" value="false" /><br />

<label for="river2">river2</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The river2 field is required." id="river2" name="river2" type="checkbox" value="true" />
<input name="river2" type="hidden" value="false" /><br />

<label for="river3">river3</label>
<input checked="checked" class="checkbox" data-val="true" data-val-required="The river3 field is required." id="river3" name="river3" type="checkbox" value="true" />
<input name="river3" type="hidden" value="false" /><br />

JQuery

$.validator.addMethod("checkbox", function (value, element) {
  return $('.checkbox:checked').length > 0;
  }, 'At least one river must be selected.');

推荐答案

工作演示 http://jsfiddle.net/RGUTv/

更新 - 2015 年 1 月 12 日 => http://jsfiddle.net/r24kcvz6/ CDN 已更改 http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js - 您可以通过取消选择所有复选框并单击 submit 按钮来复制行为.

Updated - 12 Jan 2015 => http://jsfiddle.net/r24kcvz6/ CDN was cahnged http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js - you can replicate the behaviour by deselcting all the checkboxes and clicking on the submit button.

• http://jqueryvalidation.org/#latest-files-on-jsdelivr-cdn-%28hotlinking-welcome%29:

代码

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$("#itemForm").validate({
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.attr("type") == "checkbox") error.insertAfter(checkboxes.last());
        else error.insertAfter(element);
    }
});

html

<form name="itemForm" id="itemForm" method="post">

<label for="river1">river1</label>
<input checked="checked" data-val="true" data-val-required="The     river1 field is required." id="river1" name="river1" type="checkbox" value="true" class="require-one" />
<input name="river1" type="hidden" value="false" /><br />

<label for="river2">river2</label>
<input checked="checked" data-val="true" data-val-required="The river2 field is required." id="river2" name="river2" type="checkbox" value="true" class="require-one" />
<input name="river2" type="hidden" value="false" /><br />

<label for="river3">river3</label>
<input checked="checked" data-val="true" data-val-required="The river3 field is required." id="river3" name="river3" type="checkbox" value="true" class="require-one" />
<input name="river3" type="hidden" value="false" /><br />

<input type="submit" />
</form>

图片如果你取消勾选验证将触发

Image if you un-tick the validation will trigger

这篇关于验证至少一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！