[英]jquery validation plugin for checkbox- at least one selected
I am using jquery validation plugin for form fields validation. 我正在使用jquery验证插件进行表单字段验证。 I have multiple checkboxes in the form. 我在表单中有多个复选框。 I tried couple of different ways for the logic 'at least one need to be selected' but nothing is working but when i try something out of validation plugin its working fine with this code. 我尝试了几种不同的逻辑方式“至少需要选择一种”,但没有任何效果,但是当我尝试使用验证插件以外的方法时,此代码可以正常工作。 If you can tell me how i can incorporate this below code within validation plugin 如果您能告诉我如何将以下代码合并到验证插件中
<script type="text/javascript">
$(document).ready(function () {
$('.submit').click(function() {
checked = $("input[type=checkbox]:checked").length;
if(!checked) {
// <form:errors path="chk" cssClass="errors" element="div" />
$(".form-error").text("* You must check at least one checkbox.").show();
// alert("You must check at least one checkbox.");
return false;
}
});
});
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function(){
$("#myForm").validate({
rules: {
crcode: "required",
dtype: "required",
pview: "required",
prview: "required",
},
messages: {
crcode: "Rate code is required",
dtype: "Dwell type is required",
pview: "Public view is required",
prview: "Private view is required",
}
});
});
</script>
Here are my checkboxes
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;" >
<input type="checkbox" name="chkbox" id="fancy-checkbox-default1" autocomplete="off" class="fancy" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default1" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-default1" class="[ btn btn-default active ]">
Video+Internet
</label>
</div>
</div>
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
<input type="checkbox" name="chkbox" id="fancy-checkbox-default2" autocomplete="off" class="fancy" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default2" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-default2" class="[ btn btn-default active ]">
Video+Phone
</label>
</div>
</div>
<div class="[ form-group ]" style="font-family: KlavikaWebBasicBold;">
<input type="checkbox" name="chkbox" id="fancy-checkbox-default3" autocomplete="off" class="fancy" />
<div class="[ btn-group ]">
<label for="fancy-checkbox-default3" class="[ btn btn-default ]">
<span class="[ glyphicon glyphicon-ok ]"></span>
<span> </span>
</label>
<label for="fancy-checkbox-default3" class="[ btn btn-default active ]">
Video+Security
</label>
</div>
</div>
if you can tell me how I can incorporate this below code within validation plugin 如果您能告诉我如何将以下代码合并到验证插件中
$('.submit').click(function() {
checked = $("input[type=checkbox]:checked").length;
if (!checked) { ....
You don't. 你不知道
That code makes no sense for use with jQuery Validate plugin and can be removed entirely . 该代码与jQuery Validate插件一起使用毫无意义, 可以完全删除 。 When using the jQuery Validate plugin, you do not need to write a wholly independent function for checkbox validation, NOR do you need a click handler of any kind . 使用jQuery Validate插件时,您无需编写用于复选框验证的完全独立的函数,也不需要任何类型的点击处理程序 。
You simply need to declare the required
rule on the checkbox name and the plugin will automatically make at least one checkbox required. 您只需要在复选框名称上声明required
规则,插件就会自动使至少一个复选框成为必需。
$(document).ready(function(){
$("#myForm").validate({
rules: {
chkbox: "required", // <- add this
crcode: "required",
dtype: "required",
pview: "required",
prview: "required",
},
messages: {
chkbox: "* You must check at least one checkbox.", // <- add this
crcode: "Rate code is required",
dtype: "Dwell type is required",
pview: "Public view is required",
prview: "Private view is required",
}
});
});
DEMO: http://jsfiddle.net/42t2twLo/ 演示: http : //jsfiddle.net/42t2twLo/
Exact placement of this checkbox error message can be facilitated with the errorPlacement
option . 可以使用errorPlacement
选项来简化此复选框错误消息的精确放置。
errorPlacement: function(error, element) {
if (element.is(":checkbox")) {
error.insertBefore(element); // custom placement example
} else {
error.insertAfter(element); // default placement
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.