Hubspot Form Validation Trigger

Developer Support CMS Development
,
1

Hi Mates,

I have an Hubspot Form as rendered module (no iframe) and want to trigger the hubspot-form-validation. (like the validation that happend every time the user clicks, changes or leaves an input field --> shows hubspot error on fail)

How can i reach that?

2

Hey @Hutfuchs you can’t edit this on a hubl HubSpot form module, you can however use the callbacks from the HubSpot embed code to edit or trigger some of the validation messages if you wish, you’ll need some JS experience though! There’s documentation on this here:

3

Hi Tom,

I know that it doesn’t work with the hubl module and I’m looking for a JS solution to trigger the form validation live in the frontend so that I can disable the next button on multi-step forms until all inputs have been filled out correctly.

4

If you use the JS to embed your form, you are able to set up a listener once the form is loaded. on there is where you would handle your scripts to have other listeners
Here is an example that uses the onFormSubmitted callback -- this is an old old script I made
Check out the form events documentation.
You would likely need to set up a function that
- disables buttons upon form ready
- on form input blurs / on change on the form elements then checks to see what has data in it and if so, removes the disabled on the button
That is likey the easiest path

5

Hi Nick,

Thanks for your script but this only works with the steplesss legacy Forms ( as Tom mentioned)

6

Hey @Hutfuchs at the moment callbacks don’t seem to play nicely with the new forms editor, and the editor loads in an iframe so you can’t add custom JS to it, as far as I know there’s no way to do this right now with the new forms editor, only the legacy one.

7

I have solved it for now by checking initially and on input whether all required form fields are filled and no hs_error elements are present (for the current step).
If necessary, the “Next” button is blocked.

It works for now, but it would be better if HubSpot provided some events or a built-in solution for this in its new forms.

8

Hello,

To trigger HubSpot form validation manually (like when a user clicks, changes, or leaves an input field), you can use HubSpot’s built-in form validation functionality. Typically, this validation occurs automatically as users interact with the form fields.

If you’re looking to trigger the same validation outside of normal user interactions, you’ll need to work with HubSpot’s form API or custom event listeners to simulate these actions, but in general, HubSpot forms handle validation automatically when the user engages with them.

9

Hey @Nhal I wouldn’t recomend using the api to do your immediate validation client side. Calling HubSpot’s api, then using that response to serve up client side validation will take quite some time. The form submissions api is not designed to provide client side validation so may be delayed.

For sending submissions to the HubSpot api you should be building your own client side validation and validating your data prior to sending it to the HubSpot forms api.

10

Nice solution for now. Hopefully HubSpot introduces official validation events in the new forms editor to better support custom JavaScript and multi-step forms.

11

Hi @Kavya_H_N, I hope that you are well!

Thanks for commenting on this HubSpot Community topic!

At the moment, the global form events API for the new forms editor does not suggest a method to programmatically trigger field-level validation (the blur/change/click validation).

I’ve noticed a similar idea already present in our Ideas Forum: Trigger mandatory form field validation upon Submit . To contribute, you can upvote the existing idea and share more details about your specific use case in the comments.

That said, here are some options for you:

  • You could listen to hs-form-event:on-submission:failed, this fires when client-side validation fails on submit, which you can use to react to validation errors.

  • You could programmatically click the submit button, this triggers HubSpot’s built-in client-side validation pass.

I hope this helps in the meantime!

Have a lovely day!
Bérangère

This post was created with the assistance of AI tools