[英]jQuery Validation at least one checkbox is selected
I have the following piece of html code for form checkboxes 我有以下用于表单复选框的html代码
<div class="drinking col-xs-12">
<div class="col-xs-7 drinkingLeft">
<input type="checkbox" name="allwines" id="allwines" value="0" class="require-one col-xs-1 styled myClassA" value="0" data-label="All Wines" />
<input id='allwinesHidden' type='hidden' value='0' name='allwines'>
</div>
<div class="col-xs-5 drinkingLeft">
<input type="checkbox" name="beer" id="beer" value="0" class="require-one col-xs-1 styled myClassB" value="0" data-label="Beer" />
<input id='beerHidden' type='hidden' value='0' name='beer'>
</div>
<div class="clearix"></div>
<div class="col-xs-7 drinkingLeft">
<input type="checkbox" name="redwines" id="redwines" value="0" class="require-one col-xs-1 styled myClassC" value="0" data-label="Red Wines" />
<input id='redwinesHidden' type='hidden' value='0' name='redwines'>
</div>
<div class="col-xs-5 drinkingLeft">
<input type="checkbox" name="cider" id="cider" value="0" class="require-one col-xs-1 styled myClassD" value="0" data-label="Cider" />
<input id='ciderHidden' type='hidden' value='0' name='cider'>
</div>
<div class="clearix"></div>
<div class="col-xs-7 drinkingLeft">
<input type="checkbox" name="whitewines" id="whitewines" value="0" class="require-one col-xs-1 styled myClassE" value="0" data-label="White Wines" />
<input id='whitewinesHidden' type='hidden' value='0' name='whitewines'>
</div>
<div class="col-xs-5 drinkingLeft">
<input type="checkbox" name="spirits" id="spirits" value="0" class="require-one col-xs-1 styled myClassF" value="0" data-label="Spirits" />
<input id='spiritsHidden' type='hidden' value='0' name='spirits'>
</div>
<div class="clearix"></div>
<div class="col-xs-7 drinkingLeft">
<input type="checkbox" name="sparkling" id="sparkling" value="0" class="require-one col-xs-1 styled myClassG" value="0" data-label="Sparkling/Champagne" />
<input id='sparklingHidden' type='hidden' value='0' name='sparkling'>
</div>
<div class="col-xs-5 drinkingLeft">
<input type="checkbox" name="fortified" id="fortified" value="0" class="require-one col-xs-1 styled myClassH" value="0" data-label="Fortified" />
<input id='fortifiedHidden' type='hidden' value='0' name='fortified'>
</div>
<div id="error_msg3"></div>
<div class="clearix"></div>
</div>
</div>
I want to make sure that at least one of the check boxes is selected. 我要确保至少选中了一个复选框。
I want that NOT as an alert box ; 我希望不要把它当作一个警告框; however the message need to show up in the div error-msg3. 但是该消息需要显示在div error-msg3中。
Please note that all the inputs have different class names and ids. 请注意,所有输入都具有不同的类名称和ID。 A staging link is at 临时链接位于
https://bitly.com/1i3f1MY https://bitly.com/1i3f1MY
I am using jQuery validation to validate rest of the form. 我正在使用jQuery验证来验证表单的其余部分。 Will be nice to get solution through jquery validation. 通过jquery验证来获取解决方案将是很好的。
Thanks in advance 提前致谢
This is very simple...... 这很简单……
function validate_form()
{
valid = true;
if($('input[type=checkbox]:checked').length == 0)
{
alert ( "ERROR! Please select at least one checkbox" );
valid = false;
}
return valid;
}
HTML 的HTML
<form name="myform" method="post" action="#" onsubmit="return validate_form();">
<input type="checkbox" name="box1" value="box1">Box1
<input type="checkbox" name="box2" value="box2">Box2
<input name="submit" type="submit" value="Submit"/>
</form>
You will have to change the name attributes of the checkboxes, and add a rule for it with the minlength
set to 1. 您将必须更改复选框的名称属性,并为其添加minlength
设置为1的规则。
You can after show the custom message and append it to #error_msg3
with : 之后,您可以显示自定义消息,并使用以下命令将其附加到#error_msg3
:
if(element.attr("name") == "check") error.appendTo("#error_msg3")
EDIT 编辑
$("input[type='checkbox'][name='check']").change(function() {
if ($("input[type='checkbox'][name='check']:checked").length){
$(this).valid()
}
})
EDIT 2 编辑2
I've updated the Fiddle, now the message toggles correctly when you have at least one checkbox checked or not. 我更新了小提琴,现在无论您是否至少选中一个复选框,消息都可以正确切换。
$("input[type='checkbox'][name='check']").change(function() {
$('#submitDetails').valid();
});
Quote OP : 引用OP :
"I want to make sure that at least one of the check boxes is selected." “我要确保至少选中了一个复选框。”
If you want to use the jQuery Validate plugin, and all checkboxes have a different name
, simply use the require_from_group
method that's part of the additional-methods.js
file . 如果您想使用jQuery Validate插件, 并且所有复选框都使用不同的name
,则只需使用require_from_group
方法,该方法是require_from_group
additional-methods.js
文件的一部分。
Since you already have a common class on these checkboxes called require-one
, it's even easier. 由于您已经在这些复选框上建立了require-one
名为require-one
的通用类,因此更加容易。
$('#form').validate({
rules: {
fieldname: {
require_from_group: [1, '.require-one']
},
// declare same rule on all eight checkboxes
....
....
}
});
However, rather than declare all eight of these within .validate()
, you can use the .rules('add')
method inside of a jQuery .each()
to declare them all at once. 然而,而不是内声明的这些所有八个.validate()
您可以使用.rules('add')
方法的jQuery内.each()
在一次声明它们。
$('.require-one').each(function () {
$(this).rules('add', {
require_from_group: [1, this],
messages: {
require_from_group: "please check one"
}
});
});
Then to combine all eight messages into one, use the groups
option... 然后要将所有八条消息合并为一个,请使用groups
选项...
$('#form').validate({
groups: { // combine these error messages into one
checkboxes: 'allwines beer redwines cider whitewines spirits sparkling fortified'
}
});
Working DEMO: http://jsfiddle.net/JVWu2/1/ 工作演示: http : //jsfiddle.net/JVWu2/1/
Placing your error message into the #error_msg3
error box is no different than placing any of your other jQuery Validate messages. 将错误消息放入#error_msg3
错误框与放置任何其他jQuery Validate消息没有什么不同。
Try with this 试试这个
$("#YourbuttonId").click(function(){
if($('input[type=checkbox]:checked').length == 0)
{
alert('Please select atleast one checkbox');
}
});
By Plugin 通过插件
HTML 的HTML
<label class="checkbox inline">
<input type="checkbox" id="typecb1" name="spamm[]" value="Loading Point"> Loading Point
</label>
<label class="checkbox inline">
<input type="checkbox" id="typecb2" name="spamm[]" value="Unloading Point"> Unloading Point
</label>
<label class="checkbox">
<input type="checkbox" id="typecb3" name="spamm[]" value="Retailer Unloading"> Retailer Unloading
</label>
Script 脚本
rules:{
"spamm[]": {
required: true,
minlength: 1
}
}
Try 尝试
adding this code will do 添加此代码即可
var chck = $('input[type=checkbox]');
chck.addClass('check-one');
$.validator.addMethod('check-one', function (value) {
return (chck.filter(':checked').length > 0);
}, 'Check at least one checkbox');
Group will show error in front first check-box only 组仅在前面的第一个复选框中显示错误
var chck = $('input[type=checkbox]'); chck.addClass('check-one'); $.validator.addMethod('check-one', function (value) { return (chck.filter(':checked').length > 0); }, 'Check at least one checkbox'); var chk_names = $.map(chck, function (el, i) { return $(el).prop("name"); }).join(" "); $("#submitDetails").validate({ groups: { checks: chk_names }, submitHandler: function (form) { alert('Form Submited'); return false; } });
$("#submitDetails").validate({ submitHandler: function (form) { alert('Form Submited'); return false; } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.