jQuery Validation plugin and Bootstrap 4 CSS classes

I'm using jQuery Validation plugin to validate a WordPress theme form. I'm using also Bootstrap 4 so I'd integrate the Bootstrap validation classes ("is-valid" and "is-invalid") with Validation plugin, how can I do?

I'm using jQuery Validation plugin to validate a WordPress theme form. I'm using also Bootstrap 4 so I'd integrate the Bootstrap validation classes ("is-valid" and "is-invalid") with Validation plugin, how can I do?

• jquery
• css
• forms
• twitter-bootstrap
• validation

Share Improve this question asked Jul 26, 2019 at 14:18 user164608user164608

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I found this solution:

$.validator.setDefaults({
    highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
    }
});

This is my previous personal solution:

signup_form.on( 'change submit', function( e ) {
    $( '.error' ).removeClass( 'is-valid' ).addClass( 'is-invalid' );
    $( '.valid' ).removeClass( 'is-invalid' ).addClass( 'is-valid' );
} );

Which is better?