How to Validate WordPress Form Fields Without Submitting

The built-in HTML5 validation uses the following attributes:

• “required” 一 an attribute that allows the field block to be set as required or not by pressing the “asterisk” icon on the settings panel;
• “type” 一 an attribute that sets the type of the specific block (e.g., for the Text Field: “Text,” “Email,” “Url,” “Tel,” and “Password.” The type selected here defines the information considered “correct” for this field). The attribute is set in the Field section of the Block settings.
• “min length / max length in symbols” 一 an attribute that limits the string length to be set in the Field section of the Block settings.

The set of available validation attributes depends on the block field. For example, the “required” attribute can be set for the fields intended to enter data: the Text Field, Textarea Field, Number Field, Date Field, Media Field, etc. In contrast, this attribute can not be set for the Hidden Field or Calculated Fields.

Also, specific validation options can be set for different field blocks. For example, the MIN LENGTH (IN SYMBOLS) and MAX (LENGTH IN SYMBOLS) for the Text Field, and the MIN VALUE, MAX VALUE, and STEP for the Number Field.

This option is available for the Text Field, Textarea Field, Media Field, Number Field, Range Field, Date Field, Datetime Field, and Time Field blocks. 

The following VALIDATION TYPES are available:

• Inherit 一 an option that is available for the Text Field and Textarea Field blocks that  add advanced rules that check the entered data in these fields;
• Default 一 an option that allows the native validation provided by the browser; 
• Advanced 一 an option that allows adding the advanced rules and changing the text of the error messages.

Read the Advanced Form Validation tutorial to learn how to manage these settings.

This step duplicates the first one and is unnecessary if you have previously configured the corresponding field’s settings.

First, either copy the post ID from the form’s URL or head back to the WordPress Dashboard > JetFormBuilder > Forms directory. Find the necessary form and get its ID from the Shortcode column.

Now, to implement the field validation without clicking the “Submit” button, you need to go to WordPress Dashboard > Appearance > Theme File Editor.

Then click on the functions.php file in the right sidebar, scroll down the file, and add the filter where “your-form-id” will be the ID you previously copied:

add_action( 'wp_footer', function () { ?>
<script>
  jQuery( '.jet-form-builder[data-form-id="your-form-id"] input, .jet-form-builder[data-form-id="your-form-id"] select' ).on( 'blur', function() {
      this.reportValidity();
    } );
</script>
<?php } );

Don’t forget to click the “Update File” button. 

Add the form to a page created in Elementor, Block Editor, or the Bricks theme using the JetForm widget/block/element. Also, for more details about configuring the JetForm widget/block/element settings, follow the How to Display a Form on the Front End tutorial.

After incorrectly completing the fields on the front end, a user will see a certain tooltip if the entered value is incorrect without clicking the “Submit” button.

For example, it can be “Please include an ‘@’ in the email address.the text is missing an @.” text for the Text Field.

In the case of the Number Field, it can be the “Value must be less than or equal …”.

That’s it. Now you know the ways of implementing field validation without submitting the JetFormBuilder form on your WordPress site.