I am using jQuery Validate to validate my form, it is placing errors in a position which is not appropriate for my forms, I want to change the position of error placement in it, but not to find a solution.
My jQuery code:
$('#content form:first').validate({
rules: {
MSRP: {
number: true
},
SellingPrice: {
number: true
},
BoxDimensionHeight: {
number: true
},
BoxDimensionWidth: {
number: true
},
BoxDimensionDepth: {
number: true
},
BoxWeight: {
number: true
}
},
ignore: ':not(select:hidden, input:visible, textarea:visible)',
});
HTML Code:
<div class="row ">
<label class="control-label col-md-2 col-sm-12 col-xs-12">
Name<span class="required">*</span>
</label>
<div class="col-md-10 col-xs-12 col-sm-12" style="padding:0">
<div class="fg-line">
<input class="form-control" id="Name" name="Name" required="" type="text" />
</div>
</div>
</div>
the output of code:
Now you can see the error placement is not correct, how to resolve it?
Ok, so this should be easy, to resolve your issue, you should have following code for error placement
$('#content form:first').validate({
// rules etc,
errorPlacement: function (error, element) {
error.insertAfter(element.closest('div'));
}
});
this piece of code should resolve your issue, also, an example of it is already provided in Docs
Subscribe to our weekly Newsletter & Keep getting latest article/questions in your inbox weekly