如何使用 jQuery 验证插件验证 Select2 插件数组答案

【问题标题】：How to validate Select2 Plugin array using jQuery validate plugin如何使用 jQuery 验证插件验证 Select2 插件数组
【发布时间】：2021-01-04 19:26:21
【问题描述】：

我正在尝试验证此表单。我想确保用户至少选择 1 个用户并在正文中输入一些内容。该表单使用一个 select2 字段和一个summernote textarea。我做错了什么？

形式：

    <form id="ShareThisForm" method="post">
        <div class="modal fade" id="Share" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header bg-primary">
                        <h5 class="modal-title text-light"><i class="fas fa-share-alt mr-1"></i>Share to</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body p-3">
                        <div class="form-group">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">
                                        <i class="fas fa-user mr-2"></i>Users
                                    </span>
                                </div>
                                <select class="form-control select2bs4 select2-hidden-accessible" multiple="" data-placeholder="Share to" tabindex="-1" aria-hidden="true" id="sharing" name="users[]" data-select2-id="sharing">
                                    <?php foreach($this->Database->get('users')->fetchAll() as $user){ ?>
                                        <option value="<?=$user['id']?>"><?=ucwords(str_replace('_',' ',str_replace('.',' ',$user['username'])))?></option>
                                    <?php } ?>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control wysihtml5-alt" name="body"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" name="ShareThis" class="btn btn-primary"><i class="fas fa-share-alt mr-1"></i>Share</button></div>
                    </div>
                </div>
            </div>
        </div>
    </form>

脚本：

    <script>
        var select2label
        $(document).ready(function () {
            $("#ShareThisForm").validate({
                rules: {
                    "users[]": {
                        required: true,
                    },
                    body: {
                        required: true,
                    },
                },
            });
        });
    </script>

【问题讨论】：

标签： jquery jquery-validate summernote

【解决方案1】：

我相信您正在为您的users 多选dropdown 使用select2 插件。 jQuery validate 将不与select2 插件一起使用默认您需要使用errorPlacement 方法在选择字段下方添加所需的field 消息标签。

我可以看到您也在使用boostrap 作为您的模态框，因此您还可以使用text-danger 类来确保validation 消息为红色颜色。

如果 nothing 是来自dropdown 的selected，那么在单击submit 按钮时会出现validation 消息，或者如果是selected，那么我们需要使用select2插件change 功能确保我们的错误标签被删除是在选择用户之后。我们需要将select2 标签存储为全局变量，以便在做出选择后可以访问并删除它或否则再次显示错误消息。

$('#users').on("change", function(e) {
    if (select2label){
        select2label.remove(); //remove label
    }
});

当您将select 选项名称属性添加为array => users[] 时，您需要添加如下验证规则：

"users[]": {
   required : true
},

编辑： 正如您现在提到的，您正在为您的 textarea 使用 Summernote，并且您提供了忽略它的参考。我也在回答中添加了ignore: ".note-editor *",。

现场工作演示：

//Initiate select2 plugin on users
$('#users').select2()

//global var for select 2 label
var select2label

$(document).ready(function() {
  $("#ShareThisForm").validate({
    ignore: ".note-editor *", //ignore summernote validation
    rules: {
      "users[]": {
        required: true
      },
      body: {
        required: true,
      },
    },
    errorPlacement: function(label, element) {
      if (element.hasClass('select2bs4')) {
        label.insertAfter(element.parent()).addClass('mt-2 text-danger');
        select2label = label
      } else {
        label.insertAfter(element).addClass('mt-2 text-danger');
      }
    },
    submitHandler: function(form) {
      //submit modal form
    },
  });
});

//watch the change on select - if label exist then remove it
$('#users').on("change", function(e) {
  if (select2label) {
    select2label.remove(); //remove label
  }
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Share">
 Open Modal
</button>

<form id="ShareThisForm" method="post">
  <div class="modal fade" id="Share" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title text-light"><i class="fas fa-share-alt mr-1"></i>Share To</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="'.$this->Language->_ARRAY['Close'].'">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body p-3">
          <div class="form-group">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">
                          <i class="fas fa-user mr-2"></i>Users
                        </span>
              </div>
              <select class="form-control select2bs4" multiple data-placeholder="Share to" tabindex="-1" aria-hidden="true" id="users" name="users[]" data-select2-id="users">
                <option value="0">User1</option>
                <option value="1">User2</option>
              </select>

            </div>
          </div>
          <div class="form-group">
            <textarea class="form-control wysihtml5-alt" name="body"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="submit" name="ShareThis" class="btn btn-primary"><i class="fas fa-share-alt mr-1"></i>Submit</button></div>
      </div>
    </div>
  </div>
  </div>
</form>

【讨论】：

对于 select2 字段来说就像一个魅力，但对于 wysihtml5 textarea 来说并不完全是这样。
@L.Ouellet 在我的回答中对双方都有效！请再检查一次。运行 sn-p。
问题是，您只解决了部分问题，因为是的，用户字段现在可以工作，而正文字段不再工作。所以我无法接受。此外，您的 sn-p 不包括 wysihtml5 (summernote)。
summernote 创建了额外的东西，这些东西会扰乱 jQuery 的验证。我们必须通过添加ignore: ".note-editor *", Ref: stackoverflow.com/questions/42086841/… 来忽略note-editor 类及其后的所有内容
@L.Ouellet 你不认为你甚至没有在你的问题中提到所有这些事情是不公平的，我仍然根据我所看到的select2 插件提供了一个解决方案。我花了很长时间为您编写了这个非常好的解决方案，而您正在问问题中未提及的问题????