CODEWITHSUNDEEP
javascriptandroidvalidationreactjsreact-native
Karthick Kumar
Karthick Kumar

Reputation: 1217

How to validate TextInput values in react native?

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

Upvotes: 28

Views: 74286

Answers (2)

harshit raghav
harshit raghav

Reputation: 653

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
    }
  }
/>

Upvotes: 2

G. Hamaide
G. Hamaide

Reputation: 7106

You can use a regex to check if the mail entered is valid.

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);
};

Submit text input function

onSubmit = () => {
if (!this.validateEmail(this.state.text_input_email)) {
  // not a valid email
} else {
  // valid email
}

Upvotes: 60

Related Questions