How to check email already exists after form submission

Question

I have created a subscribe form where the user inputs his email and subscribe. Now I want to add a check if the user email is already registered or not. For that, I am thinking of using filter on the email array or is there any better approach.

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: [],
      interest: "",
      success: false,
      error: false,
      errorMessage: "",
      loading: false
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(e) {
    const { name, value } = e.target;
    this.setState({
      [name]: value
    });
  }

handleSubmit(e) {
    e.preventDefault();
    const { email, interest } = this.state;
    //Email already registered
    const filterEmail = email.filter(x => x === email);
    if (filterEmail) {
      this.setState({
        error: true,
        errorMessage: "Email already subscribed"
      });
    }

}

Can someone help me out to do validation on email already exist?

score 0 · Answer 1 · answered May 03 '18 at 14:44

You can use the JavaScript includes method to check if a value already exists in an array.

if(email.includes('example@react.com')){
   //Email already exists 
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

score 0 · Answer 2 · answered May 03 '18 at 14:46

Since email seems to be a unique key, I would use .find() since .filter() looks for all the matches instead of just the first one. More info here

On a real world application this should be done on the backend with async actions and dispatching the errors and the front end taking care only of showing the errors.

vlad · Accepted Answer · 2018-05-03T15:04:40.130

Maybe you could try something like this:

So I assume you have an <input> field for the email.

First, add enteredEmail to your state.

this.state = {
      email: [],
      interest: "",
      success: false,
      error: false,
      errorMessage: "",
      loading: false,
      enteredEmail: "",
    };

After, add another handler to the Form to update the enteredEmail:

handleInputChange = (e) => {
    this.setState({enteredEmail: e.target.value})
};

Pass the handleInputChange to your input as something like

onChange={props.handleInputChange}

Then, inside your handleSubmit you could try to see if this email exists in the email array.

handleSubmit(e) {
    e.preventDefault();
    const { email, interest, enteredEmail } = this.state;
    //Email already registered
    const filterEmail = email.filter(x => x === enteredEmail);
    if (filterEmail) {
      this.setState({
        error: true,
        errorMessage: "Email already subscribed"
      });
    }

score 0 · Answer 4 · answered May 03 '18 at 15:13

You can try using the indexOf method as the email variable is an array. So, in your case, I'd create a separate function of handleChange called handleEmailChange

handleEmailChange(e) {
  const { name, value } = e.target;
  if (this.state.email.indexOf(value) !== -1) {
    this.setState({
      error: true,
      errorMessage: "Email already subscribed"
    })
  } else {
    this.setState({
      [name]: value
    });
  }
}

score 0 · Answer 5 · answered Mar 07 '21 at 13:52

There are security risks with checking your email exists in the front-end. first of all you have to have already queried all of your email list from the database and send them to front end to do this filter check. You never want to expose your user emails in the front-end. instead you want to make the api call and do the check in the server and have the server respond with throwing an exception, 'email already exists!' and then displaying the server error.message to the user.

How to check email already exists after form submission

5 Answers5