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