Advanced Form Validation


Form validation is the process when users enter data, and the browser and/or the web server will check to see that the data is in the correct format and within the constraints set by the program. To a JetFormBuilder form, you can apply the Default (browser) or Advanced validation.

The Advanced option has such advantages compared to the Default (browser) option:

  • Editing or translating the error text;
  • Customizing the appearance;
  • Custom validation rules;
  • Server-Side validation;
  • Validate non-basic inputs.

Table of Contents:

Advanced Form Validation

If you want to add validation to the WordPress form, proceed to the Validation menu section in the Form settings tab. Unfold it, and you’ll see such settings:

validation settings
  • Enable form safety — this option is used when there are form caching or conflict issues. It protects the form with a WordPress nonce. Toggle this option off if the form page’s caching can’t be disabled;
  • Enable csrf protection — if enabled, it protects a form from attacks that force authenticated users to submit a request to a website against which they are currently authenticated;
  • Enable Honeypot protection — this feature adds an invisible field to the form. If the hidden field is somehow completed, the form will be considered filled out by a bot;
  • Variation type — here, you can pick two options:
    • Default — native validation that works by browser;
validation type
  • Advanced — if you select this option, you can click the “Edit validation messages” button, and you’ll see the “Edit Manual Options” pop-up, where you can change the error text for different field types:
the first part of the edit manual options popup
  • Field is empty — for all field types if the Is Required option is enabled for the specified field. Will be shown if users don’t fill in the Required field and click the “Submit” button;
  • Email is not valid — for the Text Field with the selected “Email” Field Type in the Field Settings menu section for the block. The message will be shown if users enter an incorrect email address;
  • URL is not valid — for the Text Field with the selected “Url” Field Type in the Field Settings menu section for the block. It will be shown if users enter an incorrect web address;
  • Input mask is not completed — for the Text Field with the selected “Tel” Field Type, the enabled Set Input Mask toggle, and the filled Input mask field in the Field Settings menu section for the block. It will be shown if users enter their phone number incorrectly according to the Input mask field settings and click the “Submit” button;
the second part of the edit manual options popup
  • Files limit exceeded — for the Media Field with the Maximum allowed files to upload field completed. For example, if you set “3,” the error message will be shown if users try to upload four files or more;
  • File size limit exceeded — for the Media Field with the Maximum size in MB field filled. For example, if you set “1” Maximum size in MB, the notification will be “The size of this file cannot exceed 1 MB” if users upload a file whose size is bigger than 1 MB;
  • File type is not included in the allowed types list — for the Media Field with the Allow mime types field filled. For example, if you set the “gif/image” option, the error message will be shown if users try to upload files of other types;
  • Value does not reach the minimum — for the Number Field and Range Field with the Min value field filled. For example, if you set “5,” the error message will be shown if users try to enter or set a number less than “5”;
the third part of the edit manual options popup
  • Value exceeds the maximum — for the Number Field and Range Field with the Max value field completed. For example, if you set “100,” the error message will be shown if users try to enter or set a number greater than “100”;
  • Not enough characters — for the Text Field and Textarea Field with the Min length (symbols) field filled. For example, if you set “5,” the error message will be shown if users try to enter less than five symbols;
  • Character limit exceeded — for the Text Field and Textarea Field with the Max length (symbols) field filled. This message may appear if you set the Value option and the value exceeds the limit. For example, you created a post editing form and added the Text Field for the post title. In the Value section, you set it so that the field shows the current post title, and if it exceeds the limit, the error message will occur if you click the “Submit” button, so you will need to edit the title to submit the form;
the fourth part of the edit manual options popup
  • Timestamp is too early — for the Date Field, Datetime Field, and Time Field with the Starting from time/date fields filled. For example, if you set “8:00,” in the Starting from time field, the error message will be shown if users try to set the time that is earlier than 8 a.m.;
  • Timestamp is too late — for the Date Field, Datetime Field, and Time Field with the Limit time/dates to fields filled. For example, if you set “17:00,” in the Starting from time field, the error message will be shown if users try to set the time that is later than 5 p.m.

Advanced Form Validation for Separate Blocks

In addition to the advanced form validation, you can set the Validation for separate form fields in the Block settings tab. This option is available for the Text Field, Textarea Field, Media Field, Number Field, Range Field, Date Field, Datetime Field, and Time Field blocks. You can select such Validation Types:

Inherit

If you select this option, validation is inherited from the form arguments. Here, you can only add advanced rules that check the entered data in the Text Field and Textarea Field blocks, and if the data does not match the rule, the error message will appear.

block inherit validation type

Hover over the message in the blue rectangle and press the “+ Add Rule” button.

In the Rule Type drop-down menu, you can select such types:

rule type
  • Equals — displays the error message if the rule’s condition doesn’t match the data users enter into the form. In the Choose Field drop-down menu, you can select one of the form fields or set “Custom value.” If you pick the “Custom value” option, the Symbols field will appear, where you can enter symbols that must be typed in the form field. If you hit the coin-stack-shaped button near the Symbols field, you can set the Preset for this field. To learn more, proceed to the Preset Settings overview. Also, if you push the wrench-shaped button, you can use macros with the form field names. In the Error Message field, you can set the custom error message.
symbols field settings

For example, you have two text fields: “Password” and “Confirm Password.” 

Click on the “Confirm Password” Text Field and hit the “Edit Advanced Rules” button. In the Edit Advanced Rules pop-up, pick the “Equals” Rule Type, select the “Password” Text Field in the Choose field, and set the custom Error Message. 

So the error message will appear when the text in the “Password” and “Confirm Password” fields doesn’t match.

password does not match
  • Must contain characters — the message will appear when users don’t enter the required characters, for example, “@” for the email field;
must contain characters rule type
  • Must not contain characters — the message will appear when users enter the restricted characters;
  • Matches regular expressions — the message will appear if users enter the symbols combination that does not match the regular expressions. For example, you can set the “^.{6,}$” Regular expression for the Text Field with the “Password” Field Type, and the custom Error Message “The password is too short” will appear if users enter less than six characters into the field;
matches regular expression rule type
  • Does not match regular expressions — the message will appear if users enter the symbols combination that matches the regular expressions;
  • Server-Side callback — there are three callbacks available:
    • Custom function — with this option, the Function Name field appears, where you can enter a function. Hit the “Show” button to get examples of function registering;
server-side callback
  • Is user login unique — the custom Error Message will appear if users try to enter the login that already exists on the website;
  • Is user email unique — the custom Error Message will appear if users try to enter the email already registered on the website.

Be aware that you can add two and more advanced rules to every form field by clicking the “+ Add Rule” button.

When you set all needed advanced rules and hit the “Update” button, you’ll see the rules and messages in the Validation block section.

block inherit validation type

You can hover over it and click to edit or delete the rule.

edit or delete the advanced rule

Default

That’s the native validation that works by the browser.

block default validation type

Advanced

Here, you can add the advanced rules described above and change the text of the error messages. The number of available messages is dependent on the field type and settings. All error messages are described in the Advanced Form Validation chapter. The custom messages set for the separate field will overtake the form validation settings.

advanced validation type for block

Checking Form Validation on the Front End

Proceed to the form or block Advanced Validation settings and set the custom error messages and advanced rules. Hit the “Update” button and place the form on the page. Open the page on the front end and fill in the form fields improperly to check the error messages.

advanced validation on the front end

That’s all. Now you know how to set the advanced validation and rules for the JetFormBuilder forms on the WordPress website.

Related Docs