Email Validation (React Native). Returning the result as 'invalid' for all the entries

Question

I am trying to validate a users email, by checking it against an expression. But the result i am getting is invalid for all the entries.

UPDATED CODE

class dummytest extends Component{

  constructor(props){
    super(props);
    this.state = {
                email :'',
                validated: false ,
                 }
  };

go = () => {
           const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
           if (reg.test(this.state.email) === true){
               alert( valid);
           }
           else{
               alert();
           }
 }
  render(){
       return(
         <View style={{alignSelf:'center',marginTop:100}}>
              <TextInput autoCapitalize="none" autoCorrect={false} style={{height:20,width:200,backgroundColor:'blue'}} value={this.setState.email}/>

              <Button onPress={this.go.bind(this)}>
                 <Text> GO </Text>
              </Button>
          </View>

       );
    }
}

you are actually doing it opposite.. it is `const reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/` then `if (reg.test(this.state.email) == true)` for positive response — Neel Gala, Apr 28 '17 at 12:29
@NeelGala I am sorry, but it is giving invalid for all the entries. I don't think it is accepting the if condition. — Avikrit Khati, Apr 29 '17 at 05:22

score 109 · Accepted Answer · edited Apr 21 '21 at 06:31

109

Ok I got the code working, below you can take the look for validating the email on each user input :

Your function part:

validate = (text) => {
  console.log(text);
  let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;
  if (reg.test(text) === false) {
    console.log("Email is Not Correct");
    this.setState({ email: text })
    return false;
  }
  else {
    this.setState({ email: text })
    console.log("Email is Correct");
  }
}

You TextInput Component:

<TextInput
  placeholder="Email ID"
  onChangeText={(text) => this.validate(text)}
  value={this.state.email}
/>

edited Apr 21 '21 at 06:31

MikeyE

1,756
1
18
37

answered Apr 29 '17 at 05:37

Neel Gala

2,350
1
19
20

so if i had to validate the email after i pressed a button. What should i change. – Avikrit Khati Apr 29 '17 at 06:12
call the `this.validate(text)` from onPress of button. and test the value from the state – Neel Gala Apr 29 '17 at 06:15
i am sorry i don't understand the last part. Could you show me how? – Avikrit Khati Apr 29 '17 at 06:18
In validate function : `validate = () => {let text = this.state.email ....}`onPress of Button. and rest will be same – Neel Gala Apr 29 '17 at 06:23
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/142953/discussion-between-avikrit-khati-and-neel-gala). – Avikrit Khati Apr 29 '17 at 06:25
why you are setState if not a valid email? @NeelGala – DevAS Mar 19 '19 at 00:19
3

beware that the regex only matches traditional top level domains, such as ".com" or ".de", but not something (new) like ".berlin" or ".shop". The `.\w{2,3}` at the end needs to be something like `.\w{2,}`. For a more sophisticated regex, see https://emailregex.com/ – cokron Mar 09 '20 at 10:54
this allow `@gmail.comdfsfs` :( – Iman Marashi Oct 20 '21 at 17:51

score 3 · Answer 2 · answered Apr 28 '17 at 09:49

3

Looks like a syntax error. You've got a nested function called validate directly inside the definition for go.

As a general rule I would suggest to keep your indentation and curly-brackets consistent so these sort of errors are detectable at a glance-- when the brackets don't line up there's a problem.

Then, there's a few things you might do to get this code working:

Remove the validate (email) line along with its accompanying close bracket
Reference email via this.state.email in go
Add an additional state variable to indicate if the email has been validated or not.

Something like:

this.state = {
 email :'',
 validated : false,
}

And...

go = () => {  
        if (this.state.email.test(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/)==0) {
            this.setState({ validated : true });
        } else {
            this.setState({ validated : false });
        }
    }

answered Apr 28 '17 at 09:49

jaws

1,952
4
20
27

Thanks. But how do i send the value of email from `` to the go function – Avikrit Khati Apr 28 '17 at 10:11
2

i get an error `_this.state.email.test is not a function`. it is undefined it says. – Avikrit Khati Apr 28 '17 at 10:14
could you please help me out? – Avikrit Khati Apr 28 '17 at 11:51
Most likely because this is referencing the Button and not your class. If you change the prop to onPress={this.go.bind(this)} that should do the trick – jaws Apr 28 '17 at 17:44

score 3 · Answer 3 · edited Jan 30 '21 at 19:17

3

There is an easy to validate an email without writing a lot of code, by using a npm package called validator

Installation
```
npm i validator
```

Import the package

const validator = require('validator');

Use it to verify the email

validator.isEmail('john.doe@example.com');    // true

For more information, see the documentation: https://www.npmjs.com/package/validator

edited Jan 30 '21 at 19:17

β.εηοιτ.βε

33,893
13
69
83

answered Jan 30 '21 at 18:55

Mohamed Nabil Essefaihi

167
3
4

Roshan Wickramaarachchi · Answer 4 · 2021-11-01T06:57:31.963

if you use hooks, you can try as this

const [email, setEmail] = useState('');
const [emailValidError, setEmailValidError] = useState('');

when user enter email this function will call

const handleValidEmail = val => {
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w\w+)+$/;

if (val.length === 0) {
  setEmailValidError('email address must be enter');
} else if (reg.test(val) === false) {
  setEmailValidError('enter valid email address');
} else if (reg.test(val) === true) {
  setEmailValidError('');
}
};


 <TextInput
    style={styles.input}
    placeholder="Email"
    value={email}
    autoCorrect={false}
    autoCapitalize="none"
    onChangeText={value => {
      setEmail(value);
      handleValidEmail(value);
    }}
  />

enter this line bellow input field

{emailValidError ? <Text>{emailValidError}</Text> : null}

score 1 · Answer 5 · answered Feb 22 '18 at 10:14

I've created a Helper class and doing like this:

export default class Helper {

     static isEmailValid(email) {
        let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
        return reg.test(email) == 0;
   }
}

Call this method by:

if (Helper.isEmailValid(this.state.emailText)) {
    console.log("Email is correct");
} else {
    console.log("Email is not correct");
}

score 0 · Answer 6 · answered Apr 05 '19 at 08:01

0

validate = (text) => {
console.log(text);
let reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(reg.test(text) === false)
{
alert("Email is Not Correct");
this.setState({email:text})
return false;
  }
else {
  this.setState({email:text})
  alert("Email is Correct");
}
}


You can put this function validate in onChangeText propert of TextInput

answered Apr 05 '19 at 08:01

Apurva Aggarwal

296
3
10

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.[Read this](https://stackoverflow.com/help/how-to-answer). – Shanteshwar Inde Apr 05 '19 at 08:21

score 0 · Answer 7 · answered Feb 01 '20 at 09:39

Having a function that validates the email (probably in some separate module as you are going to reuse it),

export function validateIsEmail(email) {
  return /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email);
}

You can validate email input,

Live validation:

        <TextInput
              ...
          onChangeText={emailText => {
            setEmail(emailText);
            setInlineValidations({
              ...inlineValidations,
              emailNotValid: !validateIsEmail(emailText),
            });
          }}
        />

In this example setEmail and setInlineValidations are state setters defined by the useState hook, example const [email, setEmail] = useState('');, you can of course adapt this to your way of handling state.

score 0 · Answer 8 · answered Mar 04 '20 at 11:42

   isEmailValid = () => {
    const expression = /(?!.*\.{2})^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([\t]*\r\n)?[\t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([\t]*\r\n)?[\t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;
    return expression.test(String(this.state.email_id).toLowerCase())
}

Email Validation (React Native). Returning the result as 'invalid' for all the entries

8 Answers8

Linked