复选框的jQuery验证消息不起作用
Posted
技术标签:
【中文标题】复选框的jQuery验证消息不起作用【英文标题】:jquery validation message for checkboxes not working 【发布时间】:2019-02-16 19:08:21 【问题描述】:如果没有选中任何复选框,我需要收到“此字段为必填项”的消息。
查看:
<div style="width: 100%;">
<label class="headlabel" id="passLable" name="passLable">Category List : <strong>*</strong></label>
<div style="width: 100%;" class="form-group px-3">
<?php foreach ($cat as $data2) ?>
<div class="form-check px-2" style="display: inline-block; margin-right: 20px;">
<input type="checkbox" class="form-check-input" value="<?php echo $data2->id ?>" name="cat[]" id="category">
<label class="form-check-label"
style="padding-left: 10px;"><?php echo $this->lang->line($data2->cat_name); ?> </label>
</div>
<?php ?>
</div>
</div>
js:
$(document).ready(function ()
$('#addNewCompanyForm').each(function()
$(this).validate(
submitHandler : function()
addNewCompany();
,
rules:
'cat[]' :
required : true
,
messages:
'cat[]' :
required : "plase fill this."
,
errorElement: "small",
errorPlacement: function ( error, element )
error.addClass( "form-control-feedback" );
element.parents( ".form-group" ).addClass( "form-control-feedback" );
if ( element.prop( "type" ) === "checkbox" )
error.insertAfter( element.parent( "label" ) );
else
error.insertAfter( element );
,
highlight: function ( element, errorClass, validClass )
$( element ).parents( ".form-group" ).addClass( "has-danger" ).removeClass( "has-success" );
$('input').addClass( "form-control-danger" ).removeClass( "form-control-success" );
,
unhighlight: function ( element, errorClass, validClass )
$( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-danger" );
$('input').addClass( "form-control-success" ).removeClass( "form-control-danger" );
);
);
);
这已经以红色显示复选框,但未显示任何消息。如何获取验证消息。
我已经在上面添加了完整的 js 代码。
编辑
【问题讨论】:
查看错误放置jqueryvalidation.org/validate/#errorplacement 显示带有错误位置的完整 js 代码 @LeenaPatel 我已经更新了我上面的代码 【参考方案1】:在 foreach 循环下方添加 span
<div style="width: 100%;">
<label class="headlabel" id="passLable" name="passLable">Category List : <strong>*</strong></label>
<div style="width: 100%;" class="form-group px-3">
<?php foreach ($cat as $data2) ?>
<div class="form-check px-2" style="display: inline-block; margin-right: 20px;">
<input type="checkbox" class="form-check-input" value="<?php echo $data2->id ?>" name="cat[]" id="category">
<label class="form-check-label"
style="padding-left: 10px;"><?php echo $this->lang->line($data2->cat_name); ?> </label>
</div>
<?php ?>
<span class="error" id='errorCheck'></span>
</div>
</div>
使用$('#errorCheck').html(error)
$(document).ready(function ()
$('#addNewCompanyForm').validate(
submitHandler : function()
addNewCompany();
,
rules:
'cat[]' :
required : true
,
messages:
'cat[]' :
required : "plase fill this."
,
errorElement: "small",
errorPlacement: function ( error, element )
error.addClass( "form-control-feedback" );
element.parents( ".form-group" ).addClass( "form-control-feedback" );
if ( element.hasClass( "form-check-input" ))
$('#errorCheck').html(error);
else
error.insertAfter( element );
,
highlight: function ( element, errorClass, validClass )
$( element ).parents( ".form-group" ).addClass( "has-danger" ).removeClass( "has-success" );
$('input').addClass( "form-control-danger" ).removeClass( "form-control-success" );
,
unhighlight: function ( element, errorClass, validClass )
$( element ).parents( ".form-group" ).addClass( "has-success" ).removeClass( "has-danger" );
$('input').addClass( "form-control-success" ).removeClass( "form-control-danger" );
);
);
【讨论】:
请提供一些解释为什么这会起作用以及 OP 的方法有什么问题。 谢谢,现在它工作正常。但是错误消息显示在复选框值中。你知道如何对齐错误信息吗?我在上面添加了一张图片来展示它的显示方式。 是的,您可以在 foreach 循环下方添加空跨度并使用element.next('span')
查看我编辑的代码
当使用element.next('span')
时,错误信息根本不显示以上是关于复选框的jQuery验证消息不起作用的主要内容,如果未能解决你的问题,请参考以下文章