How to validate TextInput values in react native?

user_5845197 0
Viewed 62040

for example, While entering an email in the TextInput, it should validate and display the error message. where the entered email is valid or not

enter image description here

react-native reactjs validation android javascript
2 Answers

You can validate your input value using onBlur event on TextInput You can apply your regex or check conditions on this event.

Like this:

<TextInput
      onBlur= () => {
        //Conditions or Regex
      }
/>

In your case, Regex function:

validateEmail = (email) => {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
};

Text Input Code:

<TextInput
  onBlur= () => {
    if (!this.validateEmail(this.state.text_input_email)) {
       // not a valid email
    } else {
       // valid email
    }
  }
/>
user_95525690
Related