我有一个包含几个问题的表格。其中一些问题是复选框输入。
生成表单问题时,它遵循以下结构:
<div class="checkbox">
<div class="checkbox required">
<div class="checkbox required">
,它应该在该问题旁边打印一条错误消息。下面是我的代码。这两个问题都是必填项。它相当接近,我似乎无法完全正确。它似乎将所有具有“必需”类的 div 视为一个对象,而不是在
boxes.each
部分中将每个 div 视为它们自己的单独对象。
有没有人有什么建议?提前谢谢你。
$(document).ready(function() {
$("button").click(function(e){
e.preventDefault();
var boxes = $('div.checkbox.required');
boxes.each(function(){
if($(this).is(":checked"))
{
$(".error", this).hide();
$("form").submit();
return true;
} else if($(this).not(":checked")) {
$(".error", this).show().html("Please fill out all required fields");
return false;
}
});
});
});
label { font-weight: bold; }
.form-horizontal label span.error { color: red; }
.form-horizontal label div.error { color: red; }
.error {
padding: 2px;
font-size: 15px;
background: #FFDFDF;
border: 1px solid #FFCACA;
border-radius: 5px;
font-weight: normal;
text-align: center;
display: none;
}
<div class="checkbox required">
<h3>Question 1</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
Behavioral Follow-up
</label><br>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
Medical Follow-up
</label><br>
</div>
</div>
<p><br></p>
<div class="checkbox required">
<h3>Question 2</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
Mild
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
Moderate
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
Severe
</label><br>
</div>
</div>
<p><br></p>
<button type="button" class="btn btn-primary action-save">
<i class="fa fa-save"></i> Save changes
</button>
<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>
我看到了几个问题。
第一行是
if($(this).is(":checked"))
。此块中的$(this)
指的是div.checkbox.required
,因为我们正在遍历与此选择器匹配的元素列表。 <div>
元素不具有 :checked
属性,因此这将始终评估为 false
。相反,我们要确定div.checkbox.required
是否包含任何:checked
输入。我们可以这样做:
const hasAnyChecked = $(this).find('input:checked').length > 0;
下一个问题是
$("form").submit()
是 within boxes.each
循环。这是行不通的,因为例如,如果第一个 div.checkbox.required
包含一个 :checked
输入因此有效,则将在检查其余 div.checkbox.required
元素以确定它们是否也有效之前提交表单。相反,我们必须使用一个变量来跟踪 all div.checkbox.required
是否处于有效状态,然后在 boxes.each
循环完成后有条件地提交表单。
代码变为:
$(function() {
$('button').on('click', function () {
let isValid = true;
$('div.checkbox.required').each(function () {
const $this = $(this);
const hasAnyChecked = $this.find('input:checked').length > 0;
isValid = isValid && hasAnyChecked;
if (hasAnyChecked) {
$this.find('.error').hide();
} else {
$this.find('.error').text('Please fill out all required fields').show();
}
});
if (isValid) {
$("form").submit();
}
});
});
label {
font-weight: bold;
}
.form-horizontal label span.error {
color: red;
}
.form-horizontal label div.error {
color: red;
}
.error {
padding: 2px;
font-size: 15px;
background: #FFDFDF;
border: 1px solid #FFCACA;
border-radius: 5px;
font-weight: normal;
text-align: center;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkbox required">
<h3>Question 1</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
Behavioral Follow-up
</label><br>
<label id="8522[]">
<input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
Medical Follow-up
</label><br>
</div>
</div>
<p><br></p>
<div class="checkbox required">
<h3>Question 2</H3>
<div class="col-md-4">
<span class="error"></span>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
Mild
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
Moderate
</label><br>
<label id="8524[]">
<input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
Severe
</label><br>
</div>
</div>
<p><br></p>
<button type="button" class="btn btn-primary action-save">
<i class="fa fa-save"></i> Save changes
</button>