I'm having a issue with jquery validation styling. I'm using jquery validation additional-methods to validate one of two fields must filled and one of them is a checkbox. issue is error only gets the checkbox width. as in the image bellow.
how can i solve this. thanks in advance.
I found a way to work around it. My checkbox name is 'single_service'. firstly i hide the label error message that created by validation plugin with simple css.
label#single_service-error {display: none !important; }
then i added invalidHandler (Documentation) function that validation plugin provided to show my error in side an element that i created instead of it's label.
invalidHandler: function(form, validator) {
console.log(validator.submitted);
if (validator.submitted.single_service!=''){
$(".single_service_error").html(validator.submitted.single_service);
console.log('error');
} else {
$(".single_service_error").html(' ');
console.log('no-error');
}
}
Full function like this.
$("#add_form").validate({
rules: {
},
invalidHandler: function(form, validator) {
if (validator.invalid.single_service!=undefined){
$(".single_service_error").html(validator.submitted.single_service);
} else {
$(".single_service_error").html('');
}
}
});
i hope someone will find this useful.
errorPlacement is the better and more practical way to handle "placing errors". You would use a conditional function within. "If checkbox, place error message here, else place error message in default location"