CODEWITHSUNDEEP
androidmaterial-designandroid-textinputlayout
Kishore Jethava
Kishore Jethava

Reputation: 6834

TextInputLayout error after enter value into edittext

How can i hide a TextInputLayout error after input one text in EditText. Is it possible?

how can i achieve this or I am doing something wrong here.!!

enter image description here

code

    layoutEdtPhone =(TextInputLayout)rootView.findViewById(R.id.layoutEdtPhone);
    layoutEdtPhone.setErrorEnabled(true);
    layoutEdtPhone.setError(getString(R.string.ui_no_phone_toast));
    layoutEdtPassword =   (TextInputLayout)rootView.findViewById(R.id.layoutEdtPassword);
    layoutEdtPassword.setErrorEnabled(true);
    layoutEdtPassword.setError(getString(R.string.ui_no_password_toast));

    edtPhone=(EditText)rootView.findViewById(R.id.edtPhone);
    edtPassword=(EditText)rootView.findViewById(R.id.edtPassword);

xml 

            <EditText
                android:id="@+id/edtPhone"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="100dp"
                android:background="@drawable/edt_background_selector"
                android:drawableLeft="@drawable/phone_icon"
                android:drawableStart="@drawable/phone_icon"
                android:hint="@string/phone"
                android:inputType="phone"
                android:padding="5dip"
                android:singleLine="true"
                android:textSize="14sp" />
        </android.support.design.widget.TextInputLayout>

        <android.support.design.widget.TextInputLayout
            android:id="@+id/layoutEdtPassword"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@+id/edtPassword"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:background="@drawable/edt_background_selector"
                android:drawableLeft="@drawable/password_icon"
                android:drawableStart="@drawable/password_icon"
                android:hint="@string/password"
                android:inputType="textPassword"
                android:padding="5dip"
                android:singleLine="true"
                android:textSize="14sp" />
        </android.support.design.widget.TextInputLayout>

Upvotes: 22

Views: 59315

Answers (12)

k4dima
k4dima

Reputation: 6261

Removes error on touch

listOf(binding.userName, binding.password).forEach {
        it.setOnTouchListener { v, _ ->
            model.error.set(null)
            v.performClick()
            false
        }
    }

Upvotes: 0

David Jarvis
David Jarvis

Reputation: 2809

Using KTX:

textInputLayout.editText?.doOnTextChanged { text, start, count, after ->
    if (text?.any(invalidCharacters.toCharArray()::contains) == true) {
      textInputLayout.error = "Invalid character entered: ${invalidCharacters}"
    } else {
      textInputLayout.error = null
    }
  }

Upvotes: 2

Vucko
Vucko

Reputation: 7479

This is how I've done it using a custom class that extends TextInputLayout. Uses a TextWatcher like the other answers, but there's no need to manually do anything after using this in the xml. It takes care of everything for you. 

public class CustomTextInputLayout extends TextInputLayout {
public CustomTextInputLayout(Context context) {
    super(context);
}

public CustomTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public CustomTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    initRemoveErrorWatcher();
}

private void initRemoveErrorWatcher() {
    EditText editText = getEditText();
    if (editText != null) {
        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                setError(null);
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });
    }
}
}

To use, simply replace TextInputLayout in your xml with this:

<com.example.customViews.CustomTextInputLayout>...

Upvotes: 1

Alex Misiulia
Alex Misiulia

Reputation: 1810

Sadly there is no built-in mechanism to achieve this behavior. I created ViewUtils class that helps me:

public final class ViewUtils {
    private ViewUtils() {}

    public static void resetTextInputErrorsOnTextChanged(TextInputLayout... textInputLayouts) {
        for (final TextInputLayout inputLayout : textInputLayouts) {
            EditText editText = inputLayout.getEditText();
            if(editText != null) {
                editText.addTextChangedListener(new TextWatcher() {
                    @Override
                    public void beforeTextChanged(final CharSequence s, final int start, final int count, final int after) {

                    }

                    @Override
                    public void onTextChanged(final CharSequence s, final int start, final int before, final int count) {

                    }

                    @Override
                    public void afterTextChanged(final Editable s) {
                        if(inputLayout.getError() != null) inputLayout.setError(null);
                    }
                });
            }
        }
    }
}

And then you can easily use it in the client code:

ViewUtils.resetTextInputErrorsOnTextChanged(mEmailTextInputLayout, mPasswordTextInputLayout);

Upvotes: 2

fab
fab

Reputation: 790

You can set layoutEdtPhone.setErrorEnabled(false);

Upvotes: 11

user6602265
user6602265

Reputation:

If you want to remove the error display from TextInputLayout use:-

YourtextInputLayout.setErrorEnabled(false);

else If you want to remove error display from edittextfield use:-

edittext_id.setError(null);

I suggest using Textwatcher fucntion in Android for more efficient validation handling..

eg:

editText.addTextChangedListener(new TextWatcher() { 
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                if (!validatefName()) {
                    return;
                }
            }
        });

Upvotes: 0

Teo Inke
Teo Inke

Reputation: 5986

Do 

mTextInputLayout.setError(null);

to clear the error message.

A good practice can be a method to check for errors like this:

@Override
public void checkErrorBeforeAction() {

    boolean error = false;

    mTextInputLayout.setError(null);

    if (mEditText.getText().toString().length == 0)) {
        mTextInputLayout.setError("Field empty");
    }
    else if (mEditText.getText().toString().isValid) { // Other condition
        mTextInputLayout.setError("Field is invalid");
    }
    if (!error) {
        // Call action
    }
}

This way it refreshes the error message before setting a new one.

Upvotes: 7

Alex Felipe
Alex Felipe

Reputation: 101

I used @TextChanged of ButterKnife and worked for me, look:

@Bind(R.id.layoutEdtPhone)
TextInputLayout tlayoutEdtPhone;
@Bind(R.id.edtPhone)
EditText edtPhone;

//start ButterKnife (I spent the URL with full description for initilize)

@OnTextChanged(R.id.edtPhone)
public void changedTextOnEditPhone() {
    tlayoutEdtPhone.setError("");
}

If you want know about ButterKnife, I wrote a post with more detail, but it was done in my native language, that is, pt_br. http://blog.alura.com.br/aumentando-a-produtividade-com-butter-knife-no-android/

Upvotes: 6

Gowsik
Gowsik

Reputation: 1126

textInputLatout.getEditText().addTextChangedListener(new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count, int after) {

        }

        @Override
        public void onTextChanged(CharSequence s, int start, int before, int count) {
            if (s.length() < 1) {
               textInputLayout.setErrorEnabled(true);
                textInputLayout.setError("Please enter a value");
            }

            if (s.length() > 0) {
                textInputLayout.setError(null);
                textInputLayout.setErrorEnabled(false);
            }

        }

        @Override
        public void afterTextChanged(Editable s) {

        }
    });

Upvotes: 3

Libin Thomas
Libin Thomas

Reputation: 1172

Use a if else condition,if condition is true set TextInoutLayoutObj.setError(null); if its false set your error there

Upvotes: -1

Ganesh Kumar
Ganesh Kumar

Reputation: 3240

To illustrate further the answer given by Prithviraj, TextInputLayout does not do the validation itself. It is just a mechanism to show the error or hint. You are responsible for setting/clearing the error. Here is how you can do that. Note that in addition to TextChangedListener, you may also need OnFocusChangeListener to set the error when user jumps to second edit text without doing any modification in the first field.

protected void onCreate(Bundle savedInstanceState) {
        //.....

        edtPhone.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                validateEditText(s);
            }
        });

        edtPhone.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (!hasFocus) {
                    validateEditText(((EditText) v).getText());
                }
            }
        });
    }

    private void validateEditText(Editable s) {
        if (!TextUtils.isEmpty(s)) {
            layoutEdtPhone.setError(null);
        }
        else{
            layoutEdtPhone.setError(getString(R.string.ui_no_password_toast));
        }
    }
}

Upvotes: 25

Prithviraj Shiroor
Prithviraj Shiroor

Reputation: 138

use textwatcher here's the link http://www.learn2crack.com/2014/02/android-textwatcher-example.html

Upvotes: -2

Related Questions