复选框上有元数据的jQuery验证插件?
我正忙着验证插件,我发现它不能在我的复选框和无线电输入上工作。那么,有人能帮我解决这个问题吗?我该怎么做?(我希望可以像使用输入字段一样使用元数据) 这是我的JS:复选框上有元数据的jQuery验证插件?,jquery,validation,checkbox,Jquery,Validation,Checkbox,我正忙着验证插件,我发现它不能在我的复选框和无线电输入上工作。那么,有人能帮我解决这个问题吗?我该怎么做?(我希望可以像使用输入字段一样使用元数据) 这是我的JS: $(".valid").validate({ meta: "validate", errorPlacement: function(error, element) { error.insertAfter(element); } }); <form action="" class="va
$(".valid").validate({
meta: "validate",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
<form action="" class="valid">
<div class="row">
<label>Name</label>
<div class="right"><input type="text" value="" name="name" class="{validate:{required:true, messages:{required:'Please enter your name'}}}" /></div>
</div>
<div class="row">
<label>Checkboxes</label>
<div class="right">
<input type="checkbox" name="family" value="" id="family_one" checked="checked" class="required">
<label for="family_one">Check on</label>
<input type="checkbox" name="family" value="" id="family_two" class="required">
<label for="family_two">Check off</label>
</div>
</div>
<div class="row">
<label></label>
<div class="right">
<button type="submit"><span>Click me</span></button>
</div>
</div>
</form>
<div class="right">
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="third-check" class="require-one error"><label for="third-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="fouth-check" class="require-one"><label for="fouth-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="five-check" class="require-one"><label for="five-check" class="">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="six-check" class="require-one">
<label for="checks" generated="true" class="error">Please check at least one box.</label>
<label for="six-check">Check off</label></div>
</div>
和HTML:
$(".valid").validate({
meta: "validate",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
<form action="" class="valid">
<div class="row">
<label>Name</label>
<div class="right"><input type="text" value="" name="name" class="{validate:{required:true, messages:{required:'Please enter your name'}}}" /></div>
</div>
<div class="row">
<label>Checkboxes</label>
<div class="right">
<input type="checkbox" name="family" value="" id="family_one" checked="checked" class="required">
<label for="family_one">Check on</label>
<input type="checkbox" name="family" value="" id="family_two" class="required">
<label for="family_two">Check off</label>
</div>
</div>
<div class="row">
<label></label>
<div class="right">
<button type="submit"><span>Click me</span></button>
</div>
</div>
</form>
<div class="right">
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="third-check" class="require-one error"><label for="third-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="fouth-check" class="require-one"><label for="fouth-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="five-check" class="require-one"><label for="five-check" class="">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="six-check" class="require-one">
<label for="checks" generated="true" class="error">Please check at least one box.</label>
<label for="six-check">Check off</label></div>
</div>
名称
复选框
查看
核对
点击我
表单检查HTML复选框:
$(".valid").validate({
meta: "validate",
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});
<form action="" class="valid">
<div class="row">
<label>Name</label>
<div class="right"><input type="text" value="" name="name" class="{validate:{required:true, messages:{required:'Please enter your name'}}}" /></div>
</div>
<div class="row">
<label>Checkboxes</label>
<div class="right">
<input type="checkbox" name="family" value="" id="family_one" checked="checked" class="required">
<label for="family_one">Check on</label>
<input type="checkbox" name="family" value="" id="family_two" class="required">
<label for="family_two">Check off</label>
</div>
</div>
<div class="row">
<label></label>
<div class="right">
<button type="submit"><span>Click me</span></button>
</div>
</div>
</form>
<div class="right">
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="third-check" class="require-one error"><label for="third-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="fouth-check" class="require-one"><label for="fouth-check">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="five-check" class="require-one"><label for="five-check" class="">Check off</label></div>
<div class="custom-checkbox"><input type="checkbox" name="family" value="" id="six-check" class="require-one">
<label for="checks" generated="true" class="error">Please check at least one box.</label>
<label for="six-check">Check off</label></div>
</div>
核对
核对
核对
请至少勾选一个方框。
核对
如果您使用的是最新版本的jQuery validate,只需将类“required”添加到元素标记中即可
<input type="text" class="required" />
只需在表单上添加一个ID,就可以直接调用该函数
干杯
编辑2:
对于复选框,请尝试:
$('#idOfForm').submit(function(e) {
if($('#family_one').attr('checked') == false) {
e.preventDefault();
alert("Please check family one"); //Execute your message here
});
});
嗨,那你怎么能显示信息呢?因为当我只添加类时,它将不起作用。另外,请确保您使用的是Hi的最新版本,我使用的是最新版本。但是如果你在我的HTML中看到我正在使用所需的类,但是当我单击按钮时,我只从输入字段中得到一条消息,而不是从复选框中得到一条消息?那么,我如何才能让我看到一条信息呢?嗯,好的。但是,这并不是像inputfield那样可以通过元数据来实现的,因为复选框本质上是一个布尔元素。这意味着它可以是真的也可以是假的,只有两种可能的结果。要为jqueryvalidate需要一个复选框,还需要做更多的工作。试试看