[英]Using jQuery Validate with Select2 for validation not working
I have a form with SELECT2 into it.我有一个带有SELECT2的表单。
Here is what the sample image:这是示例图像:
As you can see on the image the error label is not the same as the other error labels.正如您在图像上看到的,错误标签与其他错误标签不同。
There are two problems:有两个问题:
Here is my code to validated my form:这是我验证表单的代码:
$("#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();
}
});
Here is my HTML code:这是我的 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>
You can simply use native select2
change function to watch for a change
on your select option selection.您可以简单地使用本机
select2
更改功能来监视选择选项的change
。
As you are using jQuery
.validate to validate
the select input so by default .validate
will not hide the label after option
is selected.由于您使用
jQuery
.validate 来validate
选择输入,因此默认情况下.validate
在option
后不会隐藏标签。
In order to get the correct label
we need to use a global variable
to store the label element and then remove
that label
on selection of an option
.为了获得正确的
label
我们需要使用global variable
来存储标签元素,然后在选择option
remove
该label
。
Live Working Demo: (both question solved)现场工作演示:(两个问题都解决了)
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/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://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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.