CODEWITHSUNDEEP
javascriptreactjsreact-native
Abdulelah
Abdulelah

Reputation: 691

react-native custom form validation

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?

Upvotes: 0

Views: 1045

Answers (2)

harisu
harisu

Reputation: 1416

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

Upvotes: 0

S. Patel
S. Patel

Reputation: 172

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

Upvotes: 1

Related Questions