欧芹验证没有必需属性的复选框，但无法验证具有的 select

Question

在下面的代码中，我有一个包含 2 个 select 字段的表单，当复选框被选中或未被选中时会根据状态显示 ..

在 jQuery 中，我根据“活动”的 select 字段设置了必需的属性。我的复选框没有设置必需的属性，实际上我已经积极尝试将其排除在脚本中作为 Parsley 版本> 2.1 的 documentet，并在两种切换模式下设置 $("#SystemMessageChk").attr('required', false)，但无论我做什么它仍然验证复选框而不是活动 select 当我选中该框并提交表单时。

有人有解决办法吗？

$(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="&nbsp;<i class='fas fa-exclamation text-info'></i>&nbsp; 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>

Answer 1

解决方案是删除 $("#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)...'
    });

});

欧芹验证没有必需属性的复选框，但无法验证具有的 select

Parsley validating checkbox that has no required attribute, but fails to validate select that has

jquery

jquery-select2

parsley.js

bootstrap-4