I have a form with SELECT2 into it.
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:
<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.
As you are using jQuery
.validate to validate
the select input so by default .validate
will not hide the label after option
is selected.
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
.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.