Select2 dropdown validation message handling
Good day guys!!
In my point of view select2 is the best way to create editable drop down and also it is very easy to manage. I had faced some issues when implemented this to my project. While we put jquery validator on it, validation message is not showing on select2 drop down. for avoiding this issue just add "ignore:[]" in the validation function for example:
var $checkoutForm = $('#vendorcountyForm').validate({
errorClass: errorClass,
errorElement: errorElement,
highlight: function (element) {
$(element).parent().removeClass('state-success').addClass("state-error");
$(element).removeClass('valid');
},
unhighlight: function (element) {
$(element).parent().removeClass("state-error").addClass('state-success');
$(element).addClass('valid');
},
ignore: [], - Look like this
// Rules for form validation
rules: {
CountyID: {
required: true,
noSpace: true
},
ProductID: {
required: true,
noSpace: true
},
Price: {
required: true,
noSpace: true
}
//,
},
...........
Another issue is when validation message shows, it will show above the select2 control instead of below the control. But other controls validation message is not facing like this issue. So i found solution after my long search on google. How to solve or clear this issue ? Let see.
errorPlacement: function (error, element,label) {
if (element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
}
else {
error.insertAfter(element);
}
},
using give code we can easily solve this issue.
Full structure of "vendorcountyForm" form validation is giving below:
/*Form Validation*/
var $checkoutForm = $('#vendorcountyForm').validate({
errorClass: errorClass,
errorElement: errorElement,
highlight: function (element) {
$(element).parent().removeClass('state-success').addClass("state-error");
$(element).removeClass('valid');
},
unhighlight: function (element) {
$(element).parent().removeClass("state-error").addClass('state-success');
$(element).addClass('valid');
},
ignore: [],
// Rules for form validation
rules: {
CountyID: {
required: true,
noSpace: true
},
ProductID: {
required: true,
noSpace: true
},
Price: {
required: true,
noSpace: true
}
//,
},
// Messages for form validation
messages: {
CountyID: {
required: 'The county field is required.'
},
ProductID: {
required: 'The product field is required.'
},
Price: {
required: 'The price field is required.'
}
},
// Do not change code below
// errorPlacement: function (label, element) {
// label.insertAfter(element.parent());
//},
errorPlacement: function (error, element,label) {
if (element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
}
else {
error.insertAfter(element);
}
},
wrapper: 'span'
});
/*End*/
Enjoy !!!
Support me to do more guys..
In my point of view select2 is the best way to create editable drop down and also it is very easy to manage. I had faced some issues when implemented this to my project. While we put jquery validator on it, validation message is not showing on select2 drop down. for avoiding this issue just add "ignore:[]" in the validation function for example:
var $checkoutForm = $('#vendorcountyForm').validate({
errorClass: errorClass,
errorElement: errorElement,
highlight: function (element) {
$(element).parent().removeClass('state-success').addClass("state-error");
$(element).removeClass('valid');
},
unhighlight: function (element) {
$(element).parent().removeClass("state-error").addClass('state-success');
$(element).addClass('valid');
},
ignore: [], - Look like this
// Rules for form validation
rules: {
CountyID: {
required: true,
noSpace: true
},
ProductID: {
required: true,
noSpace: true
},
Price: {
required: true,
noSpace: true
}
//,
},
...........
Another issue is when validation message shows, it will show above the select2 control instead of below the control. But other controls validation message is not facing like this issue. So i found solution after my long search on google. How to solve or clear this issue ? Let see.
errorPlacement: function (error, element,label) {
if (element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
}
else {
error.insertAfter(element);
}
},
using give code we can easily solve this issue.
Full structure of "vendorcountyForm" form validation is giving below:
/*Form Validation*/
var $checkoutForm = $('#vendorcountyForm').validate({
errorClass: errorClass,
errorElement: errorElement,
highlight: function (element) {
$(element).parent().removeClass('state-success').addClass("state-error");
$(element).removeClass('valid');
},
unhighlight: function (element) {
$(element).parent().removeClass("state-error").addClass('state-success');
$(element).addClass('valid');
},
ignore: [],
// Rules for form validation
rules: {
CountyID: {
required: true,
noSpace: true
},
ProductID: {
required: true,
noSpace: true
},
Price: {
required: true,
noSpace: true
}
//,
},
// Messages for form validation
messages: {
CountyID: {
required: 'The county field is required.'
},
ProductID: {
required: 'The product field is required.'
},
Price: {
required: 'The price field is required.'
}
},
// Do not change code below
// errorPlacement: function (label, element) {
// label.insertAfter(element.parent());
//},
errorPlacement: function (error, element,label) {
if (element.hasClass('select2') && element.next('.select2-container').length) {
error.insertAfter(element.next('.select2-container'));
}
else {
error.insertAfter(element);
}
},
wrapper: 'span'
});
/*End*/
Enjoy !!!
Support me to do more guys..
Comments
Post a Comment