jquery - 使用自定义复选框 CSS 的 jQuery 验证在表单验证后不起作用
问题描述
我在表单上使用这些自定义 CSS 复选框,但在提交表单(然后运行 jQuery 验证)后注意到,自定义复选框不再显示。复选框行为仍然“有效”,只是复选框不再以自定义方式设置样式。
我整理了一个小提琴来展示这个:https ://jsfiddle.net/gamehendgeVA/z31q59hc/8/
另外,我将在此处包含代码。
您可以看到,在默认情况下,选中和取消选中复选框时效果都很好。在您提交表单的那一刻,复选框不再是样式(但是,它仍然“有效”,只是不再是带有自定义样式复选标记的蓝色背景)。
关于如何最好地“解决”这个问题的任何建议都会很棒。
谢谢!
HTML
<form id="addressForm" name="addressForm" method="post">
<div class="row">
<div class="col-md-12">
<div class="alertBox infoAlert" style="padding-top:8px;padding-left:4px;">
<div class="checkbox-inline">
<label class="checkboxContainer">I have read and agree to the Privacy Policy
<input type="checkbox" name="privacyPolicyCheckbox" id="privacyPolicyCheckbox" value="no">
<span class="checkmark"></span>
</label>
</div>
</div><!-- /.alertBox -->
</div>
</div>
<div style="margin-top:20px;"><input type="submit" value="Go to Next Screen" class="btn btn-cta-ecommerce fullWidthButton760" id="addressFormSubmit" style="min-width:350px;" /></div>
</form>
CSS
/* Customize the label (the container) */
.checkboxContainer {
display: block;
position: relative;
padding-left: 35px;
/* margin-bottom: 12px; */
cursor: pointer;
font-size: 18px;/* was 22px */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.checkboxContainer input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 13px;/* was 0 */
left: 0;
height: 25px;
width: 25px;
background-color: #fff;/* was #eee */
border: 1px solid #333;/* added */
}
/* On mouse-over, add a grey background color */
.checkboxContainer:hover input ~ .checkmark {
background-color: #d1d1d1;/* was #ccc */
}
/* When the checkbox is checked, add a blue background */
.checkboxContainer input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkboxContainer input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkboxContainer .checkmark:after {
left: 10px;
top: 6px;
width: 6px;
height: 11px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
JS
jQuery.validator.setDefaults({
errorElement: "span",
errorClass: "help-block",
highlight: function(element) {
jQuery(element).parent().is('.has-success, .has-error') ?
jQuery(element).parent().removeClass('has-success').addClass('has-error') :
jQuery(element).wrap('<span class="has-error"></span>');
},
unhighlight: function(element) {
jQuery(element).parent().is('.has-success, .has-error') ?
jQuery(element).parent().removeClass('has-error').addClass('has-success') :
jQuery(element).wrap('<span class="has-success"></span>');
},
errorPlacement: function(error, element) {
if (element.attr("name") == "nonMemberType") //not needed on this screen, but keeping placeholder syntax
error.insertAfter("#selectNonMemberValidationBlock"); //not needed, see above
else {
error.insertAfter(element);
}
}
});
jQuery("#addressForm").validate({
rules: {
'privacyPolicyCheckbox': {
required: true
},
},
messages: {
'privacyPolicyCheckbox': {
required: "Please indicate that you agree to the Terms and Conditions by checking this box."
}
}
});
解决方案
highlight: function(element) {
jQuery(element).parent().is('.has-success, .has-error') ?
jQuery(element).parent().removeClass('has-success').addClass('has-error') :
jQuery(element).wrap('<span class="has-error"></span>'); // <- ???
},
unhighlight: function(element) {
jQuery(element).parent().is('.has-success, .has-error') ?
jQuery(element).parent().removeClass('has-error').addClass('has-success') :
jQuery(element).wrap('<span class="has-success"></span>'); // <- ???
},
我认为您不应该span
根据验证通过/失败动态地“包装”元素中的任何内容。这没有意义。所有应该发生的事情highlight
是unhighlight
添加/删除类。
通过调用.wrap('<span.../>')
,您正在改变 DOM 的结构,从而破坏任何影响复选框构造位置/方式的 jQuery DOM 遍历代码。
if/then/else 条件逻辑在这里甚至没有多大意义,因为这两个函数都在测试相同类的存在。
通过删除条件逻辑,从而删除.wrap()
,您的问题就消失了。
highlight: function(element) {
jQuery(element).parent().removeClass('has-success').addClass('has-error');
},
unhighlight: function(element) {
jQuery(element).parent().removeClass('has-error').addClass('has-success');
},
推荐阅读
- for-loop - 使用 cloudflare api 创建防火墙规则后的 for 循环问题
- delphi - 为什么 Delphi 代码更新 TMYQuery blob 字段会工作然后崩溃?
- java - 即使将它们添加到 BuildPath 中,也无法在 java 中导入库
- wordpress - 我博客底部的“加载更多文章”按钮(Wordpress)等不断重新加载相同的文章
- javascript - Joomla jQuery 未定义
- excel - 将 VBA 中的数字修改为字母,使单词不以“one”开头
- reactjs - 平面列表 - ScrollToIndex 应与 getItemLayout 或 onScrollToIndexFailed 一起使用
- c++ - 在 TListView 中始终显示滚动条
- database - CRecordset::GetFieldValue() 抛出异常(但并非总是如此)
- android - Android:Volley NoClassDefFoundError