0

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.enter image description here

how can i solve this. thanks in advance.

Lahiru Madusanka
  • 270
  • 2
  • 13

1 Answers1

0

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.

Lahiru Madusanka
  • 270
  • 2
  • 13
  • Using `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"* – Sparky Sep 06 '18 at 14:33