Hello! Today I’ll show you how to do some basic error handling for an email input. It’s fairly simple and can be used in any app that utilizes email sign in.
1: Build your UI
I was building a passwordless sign-in system for an app I was making, so I thought I’d walk you through the email error handling part.
All you really need is an input component and submit button, but I have a few extra components.
2: Blocks
This part is fairly easy but uses a lot of code, so I’ll break it down into smaller parts.
But first, add an alert component in the blocks area. Name and title it “Error”. Change the “Confirm” button to “Okay” and remove the “Cancel” button. Don’t give it a message yet.
Part 1:
Drag a “when (submit button) is clicked” block onto your interface.
In this part, we’ll run 3 tests using 3 dynamically initialized variables and some list blocks:
Test 1 checks for any spaces in the email by breaking the text provided from the input into a list, with the delimiter " ".
Test 2 checks for either no “@” or more than one “@” symbol in the email by breaking the text provided from the input into a list, with the delimiter “@”.
Test 3 checks for either no “.” or more than one “.” in the email by breaking the text provided from the input into a list, with the delimiter “.”.
The downside to this method is, since there are so many ending domains (.com, etc.) we can’t test for that. We also can’t test for a valid service provider. But even without these features, it is pretty good for what it does.
Part 2:
Let’s put these tests to use with some if blocks.
Read this carefully, as things can get messy fast with these blocks.
Add an if block with 3 else if conditions.
In the first if, we’ll use a basic text is empty block and call an alert’s show with a custom message:
For the second one:
EDIT: VALUE SHOULD BE “>2” AND “<2”, NOT “>1” AND “<1” FOR CONDITIONS 3 AND 4, SORRY FOR MY MISTAKE
For the third one:
For the fourth one:
EDIT: SECOND VALUE SHOULD NOT BE “test2”, IT SHOULD BE “test3”
I’ve already explained the logic and the do blocks previously in this article.
Finally, we’ll create an else condition:
Here, you can choose what happens if the email is correct. Since I’m building a passwordless sign-in system, my app will use an API to send an email to the email address provided, but what you’ll do is relevant to your app.
And you’re done! Let me know if you want a tutorial on a full passwordless sign-in system in the near future. Hope this helped you!
