我有一个包含 SELECT2 的表单。
这是示例图像:
正如您在图像上看到的,错误标签与其他错误标签不同。
有两个问题:
- 如何修复 SELECT2 上的错误标签,使其与其他错误标签相同?
- 当 SELECT2 更改其值时,如何添加或删除验证? (抱歉,我是 SELECT2 新手)
这是我验证表单的代码:
$("#systemcodeForm").validate({
submitHandler: function (form) {
},
rules: {
systemtype: {
required: true
}
},
messages: {
systemtype: {
required: "Please choose the system type",
}
},
errorPlacement: function(label, element) {
if(element.hasClass('web-select2') && element.next('.select2-container').length) {
label.insertAfter(element.next('.select2-container'));
}
else{
label.addClass('mt-2 text-danger');
label.insertAfter(element);
}
},
highlight: function(element) {
$(element).parent().addClass('has-danger')
$(element).addClass('form-control-danger')
},
success: function(label,element) {
$(element).parent().removeClass('has-danger')
$(element).removeClass('form-control-danger')
label.remove();
}
});
这是我的 HTML 代码:
<form class="cmxform" id="systemrightsForm" method="post" action="#">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">System Type</label>
<select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
<option value="">-- SELECT SYSTEM TYPE --</option>
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="systemcode">System Code</label>
<input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="systemdesc">Description</label>
<input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
</div>
</div>
</div>
</form>
最佳答案
您可以简单地使用 native select2
change函数来监视您选择的选项的更改
。
由于您使用 jQuery
.validate 来 验证
选择输入,因此默认情况下 .validate
不会隐藏 之后的标签选项
已选择。
为了获得正确的标签
,我们需要使用全局变量
来存储标签元素,然后删除
该选择
。选项
时的标签
现场工作演示:(两个问题都已解决)
var mySelect2 = $('#systemtype')
//initiate select
mySelect2.select2();
//global var for select 2 label
var select2label
$("#systemrightsForm").validate({
rules: {
systemtype: {
required: true
},
systemcode: {
required: true
},
systemdesc: {
required: true
}
},
messages: {
systemtype: {
required: "Please choose the system type",
},
},
errorPlacement: function(label, element) {
if (element.hasClass('web-select2')) {
label.insertAfter(element.next('.select2-container')).addClass('mt-2 text-danger');
select2label = label
} else {
label.addClass('mt-2 text-danger');
label.insertAfter(element);
}
},
highlight: function(element) {
$(element).parent().addClass('is-invalid')
$(element).addClass('form-control-danger')
},
success: function(label, element) {
$(element).parent().removeClass('is-invalid')
$(element).removeClass('form-control-danger')
label.remove();
},
submitHandler: function(form) {
},
});
//watch the change on select
mySelect2.on("change", function(e) {
select2label.remove(); //remove label
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="86f5e3eae3e5f2b4c6b2a8b7a8b6abe4e3f2e7a8b7" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0d1b121b1d0a4c3e4a504f504e531c1b0a1f504f" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/select2.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<form class="cmxform" id="systemrightsForm">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label">System Type</label>
<select id="systemtype" name="systemtype" class="web-select2 form-control" data-width="100%">
<option value="">-- SELECT SYSTEM TYPE --</option>
<option value="1">Option 1</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="systemcode">System Code</label>
<input type="text" class="form-control" id="systemcode" name="systemcode" placeholder="Enter system code" autocomplete="off" maxlength="15">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label" for="systemdesc">Description</label>
<input type="text" class="form-control" id="systemdesc" name="systemdesc" placeholder="Enter system description" autocomplete="off" maxlength="40">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
关于javascript - 使用 jQuery Validate 和 Select2 进行验证不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63930227/