[英]Using jQuery Validate with Select2 for validation not working
我有一个带有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>
您可以简单地使用本机select2
更改功能来监视选择选项的change
。
由于您使用jQuery
.validate 来validate
选择输入,因此默认情况下.validate
在option
后不会隐藏标签。
为了获得正确的label
我们需要使用global variable
来存储标签元素,然后在选择option
remove
该label
。
现场工作演示:(两个问题都解决了)
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.