Validation on input field

[audace]

We have a form built with the visual editor. I need to add further validation to the email input to prevent spammers from completing the form.

I can’t find any documentation on editing the JSX components (e.g., FormForm, FormInput, etc), much less extending whatever out-of-the-box validation exists.

The only validation-related documents seem to refer to validating on a model, but this isn’t stored in a Builder model, as the form data is sent with JS to a certain URL.

Do docs exist?

[Rahulj08]

Hi @audace,

Thanks for reaching out.

Our forms include built-in validation features that you can configure in the Blocks tab. You can use native HTML5 attributes, such as pattern, for basic validations. However, for more advanced checks that go beyond regular expressions, custom JavaScript is required.

For example, you can set an input field as required to prevent it from being left empty by selecting the field in the Blocks tab and enabling the required field option. You can also add custom data values to tailor the validation further.

If you need validations that aren’t available directly through Builder’s UI, you can inject your own JavaScript. This custom code—added either inline or in a separate script block—allows you to programmatically enforce complex rules. To do this, navigate to the “Edit Content JS + CSS” section in the Data tab under the “Code” tab.
For instance, to implement additional email validation, you could use:

This script checks the email input in real-time and displays a custom error message if the email does not meet the specified criteria.
You can use the Js + Css code from here in this section for the custom validation of the sections:

If you want other validation, you can integrate recaptcha else you can build your own form with all the validations by each input with custom component level.