[英]Parsley validating checkbox that has no required attribute, but fails to validate select that has
In the below code I have an form with 2 select fields that when checkbox either checked or unchecked shows up depending on the state..在以下代码中,我的表格具有2 Z9993825F04071859941E18F16EFCF42Z字段,该字段在检查复选框或未检查的复选框时,根据Z9ED39E2EA2EA2EA931586B6B6B6A985A6942EF573EZ ..
in the jQuery I set the attribute for required depending on the select field that is "active".在 jQuery 中,我根据“活动”的 select 字段设置 required 属性。 My checkbox does not have required attribute set, actually I have actively tried to exclude it in the script as documentet for Parsley version >2.1, and setting
$("#SystemMessageChk").attr('required', false)
in both toggle modes, but no matter what I do it still validates the checkbox and not the active select when I check the box, and submit the form.我的复选框没有设置必需的属性,实际上我已经积极尝试在脚本中将其排除为 Parsley 版本 >2.1 的文档集,并在两种切换模式中设置
$("#SystemMessageChk").attr('required', false)
,但无论我做什么,当我选中该框并提交表单时,它仍然会验证复选框而不是活动的 select。
Anyone with an idea for a fix?有人有修复的想法吗?
$(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>
The solution was to remove $("#SystemMessageChk").attr('required', false)
and add $("#MessageReceipients-errors").html("");
解决方案是删除
$("#SystemMessageChk").attr('required', false)
并添加$("#MessageReceipients-errors").html("");
to first toggle, in other words it was a matter of clearing the error text.首先切换,换句话说就是清除错误文本。
Working code is:工作代码是:
$( 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)...'
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.