Trouble with email validation - react-native

Question

This time I have another issue when trying to deal with email validation. When I test my app, I fill the Email TextInput with a valid string, something like Hello#email.com, however, the nonValidInput bool stays at null, and subsequent attempts to post the Email adress don't work either, the nonValidInput bool now it's true when it must be false when entering a correct email adress.
The _onSubmit script is called when the button is pressed.
Here's my code:
state = { username: null, password: null, nonValidInput: null }
_validar = () => {
let email = this.state.username
let pattern = /^(([^<>()\[\]\\.,;:\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,}))$/
if(pattern.test(String(email).toLowerCase) == true) {
this.setState({ nonValidInput: false })
} else {
this.setState({ nonValidInput: true })
}
console.warn(this.state.nonValidInput)
}
_onSubmit = () =>{
this._validar()
if(this.state.nonValidInput == false) {
const { username, password } = this.state;
} else {
this.setState({ nonValidInput: true })
}
}
Again thank you for your answers.

Answer 1

I found a couple of mistakes in your code.
this.setState is an async process. So call your console.warn() as a callback function.
if (pattern.test(String(this.state.username).toLowerCase()) == true) {
this.setState({ nonValidInput: false }, () => console.warn("true"));
} else {
this.setState({ nonValidInput: true }, () => console.warn("false"));
}
and make _onSubmit function as async until it process _validar function.
_onSubmit = async () => {
await this._validar();
if (this.state.nonValidInput == false) {
const { username, password } = this.state;
} else {
this.setState({ nonValidInput: true });
}
};
toLowerCase is a method, you can't call it as,
pattern.test(String(email).toLowerCase)
Change it to
pattern.test(String(email).toLowerCase())
Finally i see you are duplicating your code. In order to make your code clean add your validation part inside submit.
_onSubmit = () => {
let pattern = /^(([^<>()\[\]\\.,;:\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,}))$/;
if (pattern.test(String(this.state.username).toLowerCase()) == true) {
this.setState({ nonValidInput: false });
// you can call submit
} else {
this.setState({ nonValidInput: true });
// you can handle error
}
};
Hope this helps you. Feel free for doubts.