react-native custom form validation

Question

I created a custom validation method that runs on submitting a form since i found no useful, easy to implement validation library for react native, my validation method returns false and the code keeps executing, it doesn't freeze.

Here is the validation and login method

_validateEmail = (email) => {
    let isEmail = /^(([^<>()\[\]\\.,;:\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 isEmail.test(String(email).toLowerCase());
  }

_login = async () => {

    let user = this.state;

    console.log('before validate');

    await this._validateEmail(user.email);

    console.log('after validate');
}

My terminal keeps logging the after validate even if wrote a wrong email address, how can I write a custom validation method that sets the state whether to show or hide error message on every click on the form?

PS: is there a simple validation library available for this?

S. Patel · Accepted Answer · 2018-10-02 11:07:09Z

1

In general, you don't need to do email validation yourself, this task is already solved in almost every UI Components Library which has a User Input component.

Now, assuming that you are using React Native TextInput Component:

You have to set the textContentType to emailAddress, and it will automatically validate your input for the mentioned content type, like this <TextInput textContentType='emailAddress' />
After, this use the onEndEditing TextInput event to update the state if the input is valid

edited Oct 2, 2018 at 11:07

answered Sep 7, 2018 at 17:59

S. Patel

1721 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

harisu · Accepted Answer · 2019-09-15 19:58:23Z

If you are using the default react-native TextInput then just setting the probs should suffice but if you still want to perform the validation by yourself then. you should do the following. with respect to your login function

_login = async () => {

    let user = this.state;

    console.log('before validate');

    await this._validateEmail(user.email);

    console.log('after validate');
}

It means each time that the login function is called we expect both the before validate and after validate to be printed. To make sure your terminal does not log the after validate string when the wrong email is entered then you should change to something like this

_login = async () => {

    let user = this.state;

    console.log('before validate');

    let re = await this._validateEmail(user.email);

    re && console.log('after validate');
}

So basically you should check for re and if its true then your validation was correct else if its false then your validation failed. In the case where its it false you might want to set some error variables in the state and check so as to give feedback to the user. typically something like

_login = async () => {

    let user = this.state;

    console.log('before validate');

    let re = await this._validateEmail(user.email);

    if(!re){
      setState({error: "invalid Email"})
      //perform what ever login you want here.
    }
}

the above will only log after validate when the email is correct So you can then call your login in your code as onPress={()=>this._login()}

Collectives™ on Stack Overflow

react-native custom form validation

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related