V4 Extentions Validation Pro Estimated reading: 4 minutes 7 views Check what visitors type in a form field. Set a pattern, and the form shows your message when the value does not match. No code needed. WORKS ON Input and Textarea USE IT TO Check the format PLAN Pro BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free ANIMATION ADDONS PRO Active license Tip: Install and activate both Animation Addons plugins before you start. The Form widget comes with the free plugin. STEP 1 Enable the Extension Turn on the extension from your dashboard. You only need to do this once. From your WordPress Dashboard, go to Animation Addon > Extensions. Open the Elementor V4 (Atomic) tab, then click Form. Under Form Extensions, turn on Validation Pro. Click Save Settings. Validation Pro Extension (click to zoom) STEP 2 Add a Pattern Pick the field you want to check, then type a pattern for it. Open your page with the Elementor Editor. Select an Input or Textarea field inside your form. In the General tab, open the Settings section. Type your rule in Regex Pattern. Example: ^\d{5}$ accepts exactly 5 digits. Type your message in Regex Error Message. Example: Please enter a 5-digit ZIP code. Click Update to save your page. Regex Pattern and Regex Error Message (click to zoom) Note: Regex Error Message shows up after you type a pattern. SETTINGS Options Regex Pattern Default: EmptyThe rule the value must match. It is checked when the visitor clicks submit, and again on the server. Leave it empty to turn the rule off. Regex Error Message Default: EmptyThe message shown when the value does not match. If you leave it empty, the field’s own Error message is used. If that is empty too, the form shows Please match the requested format. Tip: A pattern matches anywhere in the value. To match the whole value, start with ^ and end with $. EXAMPLES Patterns You Can Copy 5-digit ZIP code ^\d{5}$ Phone number ^\+?\d{7,15}$ — optional plus sign, then 7 to 15 digits. Letters and spaces only ^[A-Za-z ]+$ Username, 4 to 12 letters or numbers ^[A-Za-z0-9]{4,12}$ Ignore upper and lower case Write the pattern between slashes with the i flag. Example: /^yes$/i RESULT Final Result On the live page, the visitor types abc in the ZIP code field and clicks Submit. The form stops and shows your message under the field. The field turns red and shows your message (click to zoom) GOOD TO KNOW How It Works Checked on submit The pattern runs when the visitor clicks the submit button. The form is not sent until every field is valid. Checked again on the server The same pattern runs again when the form is received, so a wrong value cannot get through by editing the page. Empty fields An empty field is not checked by the pattern. Turn on Required on the field if it must be filled. A broken pattern If the pattern has a mistake, it is ignored. The visitor is never blocked by a bad pattern. HELP Troubleshooting I do not see Regex Pattern Check that the extension is on. Go to Animation Addon > Extensions > Elementor V4 (Atomic) > Form and turn on Validation Pro. Pro must be active. Then reload the editor and select an Input or Textarea field. My pattern does not block anything Update the page and clear your cache. Test on the live page, not in the editor. If the field is empty the pattern is skipped, so type a wrong value first. The pattern accepts values that look wrong A pattern matches anywhere in the value. Add ^ at the start and $ at the end to match the whole value. Can I use it on a Select or Checkbox? No. Validation Pro works on Input and Textarea fields only. You Did It Your form field now checks what visitors type and shows your own message. If you face any problem, please contact our support team. We are happy to help.
