If you’re working with a WordPress theme form and using the jQuery Validation plugin along with Bootstrap 4, you might want to integrate Bootstrap’s validation classes (“is-valid” and “is-invalid”) for a seamless user experience. In this guide, we’ll walk through a solution to achieve this integration.

Understanding the Challenge

The challenge is to synchronize the Bootstrap validation classes with the jQuery Validation plugin. The user is seeking advice on two different solutions and wants to know which one is better.

Solution 1: jQuery Validation Plugin Defaults

One way to integrate Bootstrap validation classes is by using the jQuery Validation plugin’s default settings. The following code snippet achieves this:

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

This code ensures that when an input element fails validation, it receives the “is-invalid” class, and when it passes validation, the class is removed.

Solution 2: Personal Solution

The user also provides their personal solution using the WordPress theme form’s change and submit events. Here’s the code snippet:

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

In this solution, the user manually toggles the Bootstrap classes based on validation results.

Which Solution is Better?

Choosing between the two solutions depends on your preferences and specific requirements. The first solution, using jQuery Validation plugin defaults, is more aligned with the plugin’s intended usage. It automatically handles the addition and removal of classes based on validation status.

On the other hand, the second solution provides more manual control, which might be useful in certain scenarios where you need fine-grained control over class toggling.

Implementation Steps

To integrate either of the solutions into your WordPress theme:

1. Locate the JavaScript file where your form validation logic is implemented.
2. Insert the chosen code snippet (either Solution 1 or Solution 2) into your script.
3. Make sure the necessary libraries (jQuery, Bootstrap, and jQuery Validation plugin) are correctly included in your theme.
4. Test your form to ensure that the Bootstrap validation classes are applied as expected.