So today’s post I will show you how to validate an input field without using the “This input should not be empty” checked. Also I am going to use a customer Alert, because you can only use one alert box in a time in one workflow and find this unpleasant.

Custom Alert Boxes

1. Create a custom alert box

The custom alert is just a normal text element with a red background with a white text, and use custom style so later it would be easily changed. (I created the style after the first alert message.)


2. Deactivate all the this input should not be empty property settings

You can ask why I deactivated, in short, after click on the submit the page scroll to the input field that is not field out properly if the input should not be empty checked, but no error message for the user. (in a future post I will write down how to create a nice UI to signal the error, but now I changed a different approach).


3. Create a custom workflow when submitting the form fields

In my workflow you can see a lot of steps, but in reality they are just repeating the first two actions. This actions should only run when the input field or state is empty. So this only condition replace the input field property of this input should not be empty

Actions:

  • Show – Alert box (custom alert text box)
  • Animation – Transition FlipBounceYOut

Show action
Animation action

In the final result my message show under the submit button, so the user will know which field has an error. I find this approach much more user friendly, since it not scrolls in the page and all the message are in the same place.

Final alert message animated.

I am available for bubble projects, contact me to make your next application together!


Leave a Reply

Your email address will not be published. Required fields are marked *