Email validation in ReactJS is not working properly

Question

I have onSubmit function in react, added some if/else statements to validate my inputs, everything is working fine, but not for email. It keeps saying that i entered wrong email adress.

Also, can you look at my code to check if i can write it shorter?

  onSubmit = (e) => {

const { firstName, lastName, email, eventDate, validation, errorMessage} = this.state
if (firstName, lastName, eventDate, email) {
  this.setState({validation: true})
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please fill in all fields'})
  console.log(errorMessage);
}

if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/.test(email)) {
  this.setState({validation: true})
} else {
  this.setState({validation: false});
  this.setState({errorMessage: 'Please enter correct email adress'})
  console.log(errorMessage);
}

if (validation) {
  const newEvent = {
    firstName: this.state.firstName,
    lastName: this.state.lastName,
    email: this.state.email,
    eventDate: this.state.eventDate
  }

  this.props.addEvent(newEvent);

  this.setState({
    firstName: '',
    lastName: '',
    email: '',
    eventDate: ''
  });
}

e.preventDefault();
}

`new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test(email)` please try this way. — Arulmozhi Manikandan, Nov 19 '18 at 15:39
You did not enable case insensitive modifier, there must be `/i` at the end of the regex. `/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)` — Wiktor Stribiżew, Nov 19 '18 at 16:55

score 2 · Answer 1 · answered Nov 19 '18 at 15:42

2

You need to specify case insensitive match (just add the letter 'i' to your regex), like this:

if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {

Now you should get both uppercase and lowercase letters correct.

answered Nov 19 '18 at 15:42

Poul Bak

10,450
5
32
57

score 2 · Answer 2 · answered Nov 19 '18 at 15:45

2

You could use https://www.npmjs.com/package/validator to handle all of that for you.

import validator from 'validator';
validator.isEmail(value)

answered Nov 19 '18 at 15:45

Max K

121
7

score 0 · Accepted Answer · answered Nov 19 '18 at 15:40

Please find the sample below for email validation:

console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test('sddsfdgsg'))
console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test('arulgetsolute@gmail.com'))
console.log(new RegExp(/[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,15}/g).test('arulgetsolute@gmail.'))

Email validation in ReactJS is not working properly

3 Answers3