Registration form in Android (Check if email is valid and if EditText is empty)

When programming we work with a verity of forms. Forms can be very different, from a login form to a complex ordering form for a mobile store. We will start with a simple one, a registration form, to show you how you can check data that a user has entered. We can check alot of conditions, in this example we will check if an email adresse is valid and if the user entered all the required data. We will show you how to inform a user, that the entered data is not valid.

Setting up a form:
1. First we will create a new project and add an empty activity.
   ○ Check our blog on how to start a new project

2. We will go ahead and use ConstraintLayout for this sample. Check for all the constraints after you are finished. A picture of our layout will be below after the last step.

3. Add the first EditText for the first name
   ○ Name it “firstName” (id=...)
   ○ Set text to “”
   ○ Set hint to “First name”
   ○ This one should have 3 constraints, first to the top of the screen, second to the left border and third to the right border

4. Add EditText for the last name
   ○ Name it “lastName”
   ○ Set text to “”
   ○ Set hint to “First name”
   ○ This one should have 3 constraints, first should be linked to the bottom of "firstName", second to the left border and third to the right border 

5. Add EditText for the postal address
   ○ Name it “address”
   ○ Set text to “”
   ○ Set hint to “Postal address”
   ○ This one should have 3 constraints, first should be linked to the bottom of “Last name”, second to the left border and third to the right border

6. Add EditText for the email address
   ○ Name it “email”
   ○ Set text to “”
   ○ Set hint to “Email”
   ○ This one should have 3 constraints, first should be linked to the bottom of “Postal address”, second to the left border and third to the right border

7. Add a Button
   ○ Name it “registration”
   ○ Set text to “Registration”

8. Your final layout should now look something like this

Final layout

9. Let’s go to

10. Declare all the variables that we will need to find our elements on the screen, put these variables at the beginning of the MainActivity class, just after the declaration

11. Next we need to find all the controls and set a value to variables in our activity, we will do this in the onCreate method just after line “setContent…”

12. Add a new onClickListener to our button after the code, that will find elements on our activity

OnClickListener (CheckDataEntered)

   ○ Inside you will put only one line and since we have not written our function jet it will be red. When we finish this line should turn black.

13. Now we will write our first function, that will check if value of EditText is an email adresse (isEmal). Our function will take EditText as parameter and return boolean. We will need to read the string written in our EditText, we will use this value to check if it is a valid email. Android has a build in  function that will help us check the value of our CharSequence. This function is part of the Patterns library for regular expressions.

   ○ After reading value of EditText we just return validity of statement. Statement is divided in 2 parts first will check if value is empty and the second one will check if the value matches the email.
   ○ Put this function just after our onCreate method.

14. Next function will just check if EditText is empty (isEmpty)

   ○ Like before take EditText for parameter, first we read the value and then return the value isEmpty using the TextUtils function.
   ○ Put this function after isEmail function

15. We will now write a function that will check data entered for the whole form (checkDataEntered). We will check 3 conditions, first if first name and last name are both entered, last condition we will check is if the email is valid. For first name we will show toast to remind user that the first name must be entered, for last name and email we will show error (exclamation mark will show in the EditText control)


16. Let’s use our isEmpty function and check if the first name was entered

   ○ Put this code at the beginning of our checkDataEntered method
   ○ In order to check this condition all we have to do is use our isEmpty function, and we pass variable for our firstName EditText, that we declared earlier.
   ○ We will show message on screen if first name is empty and we will use toast for that.
   ○ We make new toast using makeText function of Toast class (it will return a new toast with all the appropriate values for us to use).
   ○ The last thing we must do is call show method for our toast (t)

17. Next we will check if the last name was entered, but the code will be a little bit different, since we will set an error to EditText to show that entered data is not valid with method setError.

   ○ Just as before for first name, we will first check validity using isEmpty function and if statement.
   ○ Inside the if statement we set an error if something is wrong and show the notification within the field (see the picture bellow)

18. Last check will be for validity of email

   ○ This time we will use our isEmail function for checking and we will set an error if something is wrong
   ○ Just to let you know, we could write the first line in a shorter format, but we used comparison for more transparent negation
      ■ The line would be

Negation (!)

19. If you run our app now and just leave all the values empty and press Register, you should get something like this (also the toast will appear)

Notifications for errors

20. Now enter data and check what happens, have fun!

21. Just to be sure, your final code should look like this:

22. For further practice you could:
   ○ Write a function that checks if the first name and the last name are at least 3 characters long
   ○ Check if the first and last name do not have 3 same characters in a row (etc. “aaa”)