WPForms adding a custom validation rule

custom-validation.js

;(function($) {

	var JA_Custom_Validation = {

		/**
		 * Start the engine.
		 *
		 * @since 1.0.0
		 */
		init: function() {

			$(document).on('wpformsReady', JA_Custom_Validation.customRules);
		},

		/**
		 * Custom validation rules.
		 *
		 * @since 1.0.0
		 */
		customRules: function() {

			// Only load if jQuery validation library exists
			if (typeof $.fn.validate !== 'undefined') { 

				/**
				 * Documentation for addMethod is:
				 * https://jqueryvalidation.org/jQuery.validator.addMethod/
				 * 
				 * "foo" is the name of the rule, which requires the value
				 * to be "foobar"
				 *
				 * Validation can also be forced by using the wpforms_field_atts
				 * filter to add a 'rule-foo' data attribute that is set to true,
				 * eg data-rule-foo="true"
				 *
				 * https://jqueryvalidation.org/rules/
				 */ 

				// Register the validation rule
				$.validator.addMethod("foo", function(value, element, param) {
					
					// In case you need to reference the element with jQuery
					// Not actually used in this rule
					var $ele = $(element);

					return this.optional(element) || value === 'foobar';
				}, $.validator.format("Value is not foobar"));
			}

			// Apply the rule to the input
			if ( $('.some-custom-field-class input').length ) {
				$('.some-custom-field-class input').rules( 'add', {
					foo: true
				});				
			}
		},
	}

	JA_Custom_Validation.init();
})(jQuery);

functions.php

<?php
/**
 * Add PHP validation for custom rule
 *
 * @param int $field_id
 * @param array $field_submit
 * @param array $form_data
 * @since 1.0.0
 */
function ja_custom_text_validation( $field_id, $field_submit, $form_data ) {
	
	// You could target the field specifically with the field ID or you could
	// use the field ID to look up the field class stored inside $form_data which
	// is what we do below.

	$form_id = $form_data['id'];
	$fields  = $form_data['fields'];

	// Check if field has custom CSS class configured
	if ( !empty( $fields[$field_id]['css'] ) ) {

		// Since a field can have multiple classes we have to accomodate that
		$classes = explode( ' ', $fields[$field_id]['css'] );

		if ( in_array( 'some-custom-field-class', $classes ) ) {

			// Class matches so now we validate
			if ( 'foobar' !== $field_submit ) {

				// Throw error!
				wpforms()->process->errors[$form_id][$field_id] = 'Value must be foobar';
				return;
			}
		}
	}
}
add_action( 'wpforms_process_validate_text', 'ja_custom_text_validation', 10, 3 );

The php hook doesn't seem to work. It doesn't seem to get fired at all.

Plugin "wpforms_process_validate_{$field_type}" hook is used, and validation is applied to a text field type, thus we see 'wpforms_process_validate_text'.

this php snipped adds same validation when creating the from itsleft. I need custom validation of submitted values. Want to create custom honeypot, that build-in sucks.

In case anyone else has trouble getting the JavaScript working; WPForms loads its own copy of jQuery (which gets assigned to window.jQuery), and it's this jQuery to which WPForms adds its own validation settings using $.fn.validate(). This is why the function wrapper maps jQuery to $ in the code above. (I didn't notice this when I initially added it to my site, which resulted in the script seemingly not working).

Also, the JS code above doesn't seem to be assigning the foobar class that the PHP searches for to the field, which may explain why the PHP isn't working for others.