[英]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.