如何使用 jQuery 验证插件验证 Select2 插件数组
Posted
技术标签:
【中文标题】如何使用 jQuery 验证插件验证 Select2 插件数组【英文标题】：How to validate Select2 Plugin array using jQuery validate plugin 【发布时间】：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>
【问题讨论】：
【参考方案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: ***.com/questions/42086841/… 来忽略note-editor 类及其后的所有内容
@L.Ouellet 你不认为你甚至没有在你的问题中提到所有这些事情是不公平的，我仍然根据我所看到的select2 插件提供了一个解决方案。我花了很长时间为您编写了这个非常好的解决方案，而您正在问问题中未提及的问题????以上是关于如何使用 jQuery 验证插件验证 Select2 插件数组的主要内容，如果未能解决你的问题，请参考以下文章