Quick Android Form/EditText Validation Library Sample Example Tutorial

By | September 17, 2017

In this tutorial we will use a library for quick validation of OTP, Email, Phone, Name, Empty String, Regex etc. entered in an EditText of Android layout file. When the validation fails, a small error message will be shown near the Invalid EditText itself like a tooltip bubble along with a red error exclamation mark inside the EditText. Look at the following screenshots showing the implementations of some of the form validations like email, mobile number (10 digit), empty field, alphabet validations for name etc :

                     
Step-1) We need to add the library to for called android edittext validator.
Add the following line in dependencies section of your project’s app level build.gradle file and Sync the project.

    compile 'com.andreabaccega:android-edittext-validator:1.3.+'

Step-2) The library has been added. So we just need to use it now to validate any existing layouts or create new layout with editText validation. If you already have created your layout then you can make small changes to validate your existing layout. Lets have a look at an example below:
For example, if you have a layout files containing editTexts like this:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    
    android:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <EditText
        android:id="@+id/email_fet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="email" />
</LinearLayout>

Then make the changes to replace it with this one for email validation:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:whatever="http://schemas.android.com/apk/res-auto"

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.andreabaccega.widget.FormEditText
        android:id="@+id/email_fet"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textEmailAddress"
        android:hint="email"

        app:emptyAllowed="true"
        whatever:emptyErrorString="Empty String not allowed"
        whatever:testErrorString="Enter a valid email"
        whatever:testType="email" />
</LinearLayout>

The changes we have made can be visualised as green boxes in the below image:

We have added below lines in the rootView of the layout file:

 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:whatever="http://schemas.android.com/apk/res-auto"

and the replaced the EditText View with com.andreabaccega.widget.FormEditText.
Explanation of the attributes:

app:emptyAllowed="true"

Its used for allowing empty string or not.

whatever:emptyErrorString="Empty String not allowed"

Its used for showing error message when editText is left empty and is validated. It is only called when app:emptyAllowed is set false.

whatever:testErrorString="Enter a valid email"

This is used for showing error message when the text entered in the Editext is valided for the testType provided below.

whatever:testType="email"

The test type defines the validation type for example phone,email,alpha etc..
There are following other whatever:testTypes values that can be used using this library for validation:

alpha, alphaNumeric, creditCard, custom, date, domainName, email, floatNumericRange, ipAddress, nocheck, numeric, numericRange, personFullName, personName, phone, regexp, webUrl

Step-3) Now we need to invoke the validation on a submit button’s OnClickListener using java code.
You can access the FormEditText views in your Activity’s OnCreate() or Fragment’s OnViewCreated() similar to any other view as shown below:

FormEditText  firstname = (FormEditText) view.findViewById(R.id.firstname_fet);
FormEditText  email = (FormEditText) view.findViewById(R.id.email_fet);
FormEditText  mobile = (FormEditText) view.findViewById(R.id.mobile_fet);

Now call the below method to check for validation during a submit call in any of your form’s submit button’s OnClickListener:

 private boolean validate() {
        FormEditText[] allFields={firstname, mobile, email};
        boolean allValid = true;
        for (FormEditText field : allFields) {
            allValid = field.testValidity() && allValid;
        }
        return allValid;
    }

If everything is valid, this method will return true and you can proceed with submitting the form details to your server. Otherwise the tooltip like error messages will and exclamation signs will be shown for invalid inputs.

456 total views, 7 views today

(Visited 136 times, 1 visits today)