Pro Form non-Validation still triggers Submit event in animations

I’ve got pro form set up to collect emails and save them in Form Submissions. I’ve got regex validation on the field to make sure its specific email format (abc@abc.com and not just the pro form default abc@abc ). I’ve also got an animation which is triggered with On Submit event.

The form validation works in that if it’s not valid (example, abc@abc) there is no saved form submission and there is no redirect. However, this still triggers the On Submit event and the animations start.

The client doesnt want people to be able to submit abc@abc email, it has to have a dot[domain]. For some reason the default pro forms validation allows abc@abc and client wants it to be abc@abc.com. So the regex validator I set up is working for that and there is no form submission & redirect (#top) without regex validation. But the animations get triggered with no regex validation. You can tell when the submission is actually valid and submit because the action redirects and appends #top to the end of the url.
regex:
^.+@[^.].*.[a-z]{2,}$

Anyway to work around this? Thanks. You can check out live url below:
https://goodlucklounge.wpenginepowered.com/preview/

Maybe there is an alternative solution. The end result requires email formats to have a DOT DOMAIN at the end and not just email@email
Thank you


In JavaScript, the submit event is firing, even if the server returns errors back. So this is expected behavior in general.

In a future update, I’ll include an additional checkbox to fire the action only for successful or non successful form submissions. Until then, you could use action conditions to manually check if the form submission has been valid. This would require basic javascript knowledge though.

I know javascript well, but I’m not sure where I’d pick up the event firing and what variable this info is stored in to check. Is there any info on this I can read somewhere?

Ok I’m getting a little closer here. I’ve got an event listener looking for the ‘submit’ event and then I’m running javascript conditions from there.

addEventListener("submit", 

BUT, how do I get the event of submit success? Is there an event that fires after valid submission? I I’d have to add a custom action I guess?