Start timeline after input field is filled (regex)

Getting Started
1

Hey!

mail_validation.hype.zip (23.3 KB)

I’ve got a little email form here with two different timelines. After user enters valid email address into the field and presses “send” button, “success” timeline should play and the data should be sent to php handler.

But if user accidentally lefts the field empty and presses “send” button, “failure” timeline should play and no data should be sent forward.

Can someone help me with this, please? need to modify existing js code a bit

2

Did you have this working outside of Hype previously?

I think you should get this working as you expect outside of Hype, and then we can adapt it as needed.

  • You need to include jQuery in the <head> since you’re using it
  • You don’t have a <form> element so the .submit function won’t do anything.
  • The Button, since it is outside of a standard <form> needs to specifically call ‘submit’ on a form. Here’s the normal JS way:

document.getElementById('my_form').submit();

So this says 'for all the content within the my_form form, submit it. This could be called in its own function ‘on mouse click’ once you create a <form> element.

There’s lots of ways to handle validation errors, I struggled with this myself and ended up also using jQuery to handle validation. Here’s how I did it: Hype Pro Teaser Page – This page just shows red text if there’s an email validation error. You could optionally run a timeline by adding a Submit Handler based on these instructions: https://stackoverflow.com/a/44274652

1 Like
3

Thanks for answering!

Did you have this working outside of Hype previously?

Yes. Form submission isn't the problem here :slight_smile: I didn't wrap input element in <form> because i have different input fields on different scenes. Name, for example, on the first scene. Mail on the second, etc.

4

I mentioned on the other thread, but to elaborate, you will need to have an else condition on the validation check that runs the failure timeline.

Since I was looking into this anyways, here is a version that makes those changes:

mail_validation-fixed.hype.zip (28.6 KB)

We can’t write all the code for you, but hopefully it points you in the right direction :slight_smile:.

1 Like