html - 带有复选框/单选框的 jQuery 表单验证
问题描述
该代码根本无法正常工作。问题出在哪里?
我希望必填字段在单击提交按钮时显示错误消息(如果复选框中没有值)。但是如果请求的字段中有值,则错误消息将被隐藏。
它根本不起作用。我想通过保持我的 HTML 结构笔直来解决这个问题。
$('form.trexcterc').on('submit', function () {
$('.checkbox_required').parent().next('.error').remove();
if (!$('.checkbox_required input[required')){
if (!$('.checkbox_required input:checkbox').is(':checked') || !$('.checkbox_required input:radio').is(':checked')) {
$(".checkbox_required").parent().after("<span class='error'>error message..</span>");
}
}
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item{
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<input type="submit" name="submit" value="submit" />
</form>
解决方案
主要问题是本机required
属性阻止表单提交,因此不会触发您的提交事件侦听器。相反,您可以使用简单的单击事件侦听器。
另一个问题是您需要遍历每个输入。
$('button').on('click', function() {
$('.error').remove();
$('.checkbox_required input[required]').each((i, el) => {
if (!el.checked) {
$(el).closest(".checkbox_item").after("<span class='error'>error message..</span>");
}
});
});
.trexcterc {
width: 100%;
margin: 0 auto;
padding: 0 30px;
}
.form_item label {
width: 100%;
}
.checkbox_heading {
margin: 0;
}
.checkbox_item {
display: flex;
margin: 15px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="trexcterc">
<div class="form_item" id="form_item_checkbox" data-type="checkbox-group">
<!-- Checkbox Group 1 -->
<label for="after_shot" class="checkbox_heading">After Shot<span class="required_sign">*</span></label>
<div class="checkbox-group checkbox-inline checkbox_required ">
<div class="checkbox_item">
<input type="checkbox" name="checkbox-one" id="checkbox-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-three" id="checkbox-three" class="" value="Item Three" required="required" />
<label for="checkbox-three"><span class="check_mark"></span>Item One</label>
</div>
</div>
<!-- Checkbox Group 2 -->
<div class="checkbox-group checkbox-inline checkbox_required ">
<label for="after_shot" class="checkbox_heading">Before Shot<span class="required_sign">*</span></label>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-item-one" id="checkbox-item-one" class="" value="Item One" required="required" />
<label for="checkbox-one"><span class="check_mark"></span>Item One</label>
</div>
<div class="checkbox_item">
<input type="checkbox" name="checkbox-two" id="checkbox-two" class="" value="Item Two" required="required" />
<label for="checkbox-two"><span class="check_mark"></span>Item One</label>
</div>
</div>
</div>
<button type="submit" name="submit">submit</button>
</form>
还要注意像这样的条件:if (!$('.checkbox_required input[required'))
在 jQuery 中不起作用,因为选择器总是返回一个 jQuery 对象。您需要使用.length
来检查元素是否存在。你那里也有失踪]
,应该是
if (!$('.checkbox_required input[required]').length)
推荐阅读
- database - Flutter firebase从collectionGroup获取文档值
- google-chrome-extension - Chrome扩展后台激活非活动标签
- java - 用正则表达式解析(RNS)多项式
- vb.net - 自动完成在 Visual Studio 2019 中停止工作
- javascript - 将换行符添加到复制缓冲区
- r - 查找向量组合的索引值
- javascript - 使用生成的复选框将信息从 HTML 传递到 TS?
- swift - 如何在另一个视图中关闭 ViewController
- azure - 数据工厂 - 镶木地板中的数据流删除行 - 接收器
- c# - OPTIONS 请求在 .Net Core API 上返回 500 AmbiguousMatchException