jquery - Parsley 验证没有必需属性的复选框,但无法验证具有
问题描述
在下面的代码中,我有一个带有 2 个选择字段的表单,当复选框选中或未选中时,根据状态显示..
在 jQuery 中,我根据“活动”的选择字段设置 required 属性。我的复选框没有设置必需的属性,实际上我已经积极尝试在脚本中将其排除为 Parsley 版本 >2.1 的文档集,并$("#SystemMessageChk").attr('required', false)
在两种切换模式下进行设置,但无论我做什么,它仍然验证复选框而不是活动的当我选中该框时选择,然后提交表单。
有人有修复的想法吗?
$(document).ready(function() {
$(function() {
$("#SystemMessageChk").click(function() {
if ($(this).is(":checked")) {
$("#MessageSystemDIV").show();
$("#MessageSpecificUserDIV").hide();
$("#MessageSystemType").attr('required', true);
$("#MessageReceipients1").attr('required', false)
$("#SystemMessageChk").attr('required', false)
} else {
$("#MessageSystemDIV").hide();
$("#MessageSpecificUserDIV").show();
$("#MessageSystemType").attr('required', false)
$("#MessageReceipients1").attr('required', true);
$("#SystemMessageChk").attr('required', false)
}
});
});
$('#MessageSystemType').selectpicker();
$('.js-example-basic-multiple').select2({
placeholder: 'Vælg modtager(e)...'
});
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/css/bootstrap4-toggle.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle@3.6.1/js/bootstrap4-toggle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.9.2/parsley.min.js"></script>
<form id="MessageCenterForm" name="MessageCenterForm" action="send_message_messagecenter.asp" data-parsley-validate="" data-parsley-excluded="input[type=button], input[type=submit], input[type=reset], input[type=hidden], input[type=checkbox], [disabled], :hidden"
class="demo-form" type="post">
<div class="form-group">
<label for="MessageReceipients" class="col-form-label">Receiver(s):</label>
<div class="form-check">
<label class="form-check-label-sm" for="SystemMessageChk">
System message
</label>
<input type="checkbox" id="SystemMessageChk" name="SystemMessageChk" value="yes" data-parsley-excluded="true">
</div>
<div id="MessageSpecificUserDIV">
<select class="form-control js-example-basic-multiple" id="MessageReceipients1" name="MessageReceipients1" placeholder="Vælg modtagere" multiple style="width: 100%" data-parsley-errors-container="#MessageReceipients-errors" required>
<option value=""></option>
<optgroup label="1 - Some Group">
<option value="1">Some Name</option>
</optgroup>
</select>
</div>
<div id="MessageReceipients-errors"></div>
<div id="MessageSystemDIV" style="display: none;">
<select id="MessageSystemType" id="MessageSystemType" class="form-control form-control-sm" data-show-content="true">
<option value="">Choose type..</option>
<option value="" data-content=" <i class='fas fa-exclamation text-info'></i> Information"></option>
<option value="" data-content="<i class='fas fa-check text-success'></i> Solved"></option>
<option value="" data-content="<i class='fas fa-exclamation-triangle text-warning'></i> Warning"></option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Message:</label>
<textarea class="maxLength form-control" id="message-text" maxLength="250" required></textarea>
</div>
<button type="submit" form="MessageCenterForm" class="btn btn-primary">Send</button>
解决方案
解决方案是删除$("#SystemMessageChk").attr('required', false)
并添加$("#MessageReceipients-errors").html("");
到第一个切换,换句话说,这是清除错误文本的问题。
工作代码是:
$( document ).ready(function() {
$(function () {
$("#SystemMessageChk").click(function () {
if ($(this).is(":checked")) {
$("#MessageSystemDIV").show();
$("#MessageSpecificUserDIV").hide();
$("#MessageSystemType").attr('required',true);
$("#MessageReceipients1").attr('required',false);
$("#MessageReceipients-errors").html("");
} else {
$("#MessageSystemDIV").hide();
$("#MessageSpecificUserDIV").show();
$("#MessageSystemType").attr('required',false);
$("#MessageReceipients1").attr('required',true);
}
});
});
$('#MessageSystemType').selectpicker();
$('.js-example-basic-multiple').select2({
placeholder: 'Vælg modtager(e)...'
});
});
推荐阅读
- node.js - 使用 express,mongodb 时出现错误“将循环结构转换为 JSON”
- python - 根据垂直级别合并多个Netcdf文件
- java - 集合的 FieldError 在 JSP 页面中未绑定
- vim - 如何更改在VIM编辑器中设置标记的行号的颜色?
- c# - KeyNotFoundException : 给定的键不在字典中
- django - Django 如何在 LEFT JOIN 中传递子查询
- python - Run Powershell Script when Button is presed
- javascript - 防止输入字段进行任何更改,但箭头按钮除外
- mysql - 为什么在调用成员函数时,将 MySQL 池分配给成员变量会恢复为未定义?
- javascript - 如何根据来自 API 响应的数据在 React 中构建一个简单的图表