Extend the default validation with a custom ajax based validation

In BuddyForms there are a series of default validations that aim to meet the majority of uses cases in general-purpose scenarios, some of these validations can be specific to types of fields and others can be common between fields, also, many of these validations can be configured from the Form Builder in the administrator.

Although there are several options available, sometimes we have the need to perform validations that are not found in the default BuddyForms validations, in those cases, we can make use of the hooks to build our own custom validation, In BuddyForms we can use the filter buddyforms_form_custom_validation, this filter receives two parameters, the validation status (true for default) and the form slug, these two parameters can be used as a basis to build our custom validation.  Below is a practical example in which we validate if the title is unique with respect to other entries created by the same form:

In the example above notice that at the beginning of the myprefix_custom_validation function we make a distinction so that the validation only takes effect on a specific form, we also use the WordPress WP_Query class to obtain the inputs belonging to the form related to the validation.

Note: the above example is only as an illustrative example, some extra and security validations were omitted to simplify the example.

It is important to mention that this validation will be carried out once the form is submitted, in the next section we will discuss a way to perform this validation on the flight using AJAX and Jquery Validation.

AJAX + Jquery Validation ❤

In the previous example, we saw how to use the buddyforms_form_custom_validation filter to perform a custom validation when submitting a form. Now we will explain how to perform real-time validation using AJAX and Jquery Validation.

Jquery validation is a well-known Jquery plugin that allows us to perform validations very easily, at Buddyforms we are aware that reinventing rue is not a good idea, so we make use of this plugin to build the default validations.

Since Jquery Validation is already integrated into the BuddyForms forms, we can make use of this tool to build our custom validations in real-time more easily. Next, we will present a practical example in which we will use the Jquery Validation rules function to add a new validation rule:

The previous code block has the purpose of adding a new validation rule that is in charge of making an AJAX request every time Jquery Validation executes a validation on the form. Keep in mind that this AJAX request must be able to return a boolean value (false or true) depending on whether the title of the current entry matches the title of a previously created entry, later we will see how we can adapt the myprefix_custom_validation function (presented in the previous section) so that it can be used as in the validation of the AJAX request.

It is important to mention that if we want our validation to work we must load the previously presented code block just after Buddyforms loads its assets. A convenient option is to create a javascript file with the previously shown code and use the buddyforms_front_js_css_after_enqueue hook to load this file right after BuddyForms has loaded all of its assets.

Now that we have our javascript file in place, we can move on to the next step, which is to define the Backend that will be in charge of processing the AJAX request. For this we will make use of the hooks again, in addition, we will tweak the myprefix_custom_validation function so that it can be reused in the validation process.