How to validate TextInput values in react native?
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
}
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
}
}
/>