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

问题描述

我见过一对夫妻带着同样的问题，其他职位，但不能得到解决，为我，所以我张贴我自己的问题的工作。

让我preface这说我是新来的jQuery和MVC。我有3复选框，我需要确保它们中的至少一个被选中。我有一些使用jQuery的自定义验证工作。但它显示在验证摘要3消息。我希望它显示只有一个消息，如果可能不是在一个验证摘要。我怎么能做到这一点？

HTML code

 ＆LT;标签=river1＆GT; river1＆LT; /标签＆gt;
＆LT;输入检查=选中级=复选框数据-VAL =真正的数据-VAL-所需=是必需的river1场。 ID =river1NAME =river1类型=复选框VALUE =真/＆GT;
＆LT;输入名称=river1类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;＆LT;标签=river2＆GT; river2＆LT; /标签＆gt;
＆LT;输入检查=选中级=复选框数据-VAL =真正的数据-VAL-所需=是必需的river2场。 ID =river2NAME =river2类型=复选框VALUE =真/＆GT;
＆LT;输入名称=river2类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;＆LT;标签=river3＆GT; river3＆LT; /标签＆gt;
＆LT;输入检查=选中级=复选框数据-VAL =真正的数据-VAL-所需=是必需的river3场。 ID =river3NAME =river3类型=复选框VALUE =真/＆GT;
＆LT;输入名称=river3类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;
 

JQuery的

  $。validator.addMethod（复选框功能（价值元素）{
  返回$（'复选框：选中。'）长方式＆gt; 0;
  }，至少一河之隔，必须选择'）;
 

解决方案

工作演示 HTTP： //jsfiddle.net/RGUTv/

更新 - 2015年1月12日=> http://jsfiddle.net/r24kcvz6/ CDN是cahnged HTTP：//ajax.aspnetcdn .COM / AJAX / jquery.validate / 1.13.1 / jquery.validate.js - 您可以通过deselcting所有复选框并单击提交按钮。

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

code

  $。validator.addMethod（'需要一'，功能（价值）{
    返回$：尺寸（）＆GT;（'需要一检查。'）。 0;
}，'请检查至少一个框。'）;VAR复选框= $（'。要求一'）;
VAR checkbox_names = $ .MAP（复选框功能（E，I）{
    返回$（五）.attr（名称）
}）加入（）;$（＃itemForm）。验证（{
    组：{
        检查：checkbox_names
    }，
    errorPlacement：功能（错误，元素）{
        如果（element.attr（类型）==复选框）error.insertAfter（checkboxes.last（））;
        其他error.insertAfter（元）;
    }
}）;
 

HTML

 ＆LT;表格名称=itemFormID =itemForm方法=后＆GT;＆LT;标签=river1＆GT; river1＆LT; /标签＆gt;
＆LT;输入检查=选中数据-VAL =真正的数据-VAL-所需=是必需的river1场。 ID =river1NAME =river1类型=复选框VALUE =真正的类=要求一/＆GT;
＆LT;输入名称=river1类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;＆LT;标签=river2＆GT; river2＆LT; /标签＆gt;
＆LT;输入检查=选中数据-VAL =真正的数据-VAL-所需=是必需的river2场。 ID =river2NAME =river2类型=复选框VALUE =真正的类=要求一/＆GT;
＆LT;输入名称=river2类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;＆LT;标签=river3＆GT; river3＆LT; /标签＆gt;
＆LT;输入检查=选中数据-VAL =真正的数据-VAL-所需=是必需的river3场。 ID =river3NAME =river3类型=复选框VALUE =真正的类=要求一/＆GT;
＆LT;输入名称=river3类型=隐藏值=FALSE/＆GT;＆LT; BR /＆GT;＆LT;输入类型=提交/＆GT;
＆LT; /表及GT;
 

图片如果您取消选中验证将触发

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.

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 code

<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.');

解决方案

Working demo http://jsfiddle.net/RGUTv/

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:

code

$.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屋！