To write validation for Email in Reactjs

Question

I do have a TextField component to take email as input.

<div className="form-group" style={styles.popupContainer}>
  <label>
    <IntlMessages id="DIC_SETTINGS_CLIENT_PIC_EMAIL" />
  </label>
  <label className="text-danger" style={styles.star_style}>
    <sup>{"*"}</sup>
  </label>
  <TextField
    error={errorInputs.email}
    margin="normal"
    fullWidth
    id={"email"}
    value={item.email}
    onChange={this.handleEmailChange("email")}
    onBlur={() => this.handleBlur("email")}
  />
</div>;

onChange()

handleEmailChange = email => event => {
        let changedEmailValue = event.target.value;

        switch (email) {
            case "email":
                let temp = this.state.item;
                temp.email = changedEmailValue;
                this.setState({
                    item: temp
                });
                break;
        }
    };

How to write code for validation of email in this context

Ajin Kabeer · Accepted Answer · 2020-05-27 11:06:08Z

1

You can easily validate your email by testing event.target.value with a Regex expression. Here is a sample implementation for your code.

Here is a live sandbox. Test by clicking on the console tab and entering a valid email on the input field.

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);
  if (isValidEmail) {
    this.setState({
      item: event.target.value,
    });
  } else {
    console.log("It's not a valid email");
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;

Update: Implemented with Switch

handleEmailChange = (event) => {
  let changedEmailValue = event.target.value;
  const isValidEmail = this.validateEmail(changedEmailValue);

  switch (event.target.id) {
    case "email":
     isValidEmail
          ? this.setState({ item: event.target.value })
          : this.setState({ item: "" });
      break;
    default:
      break;
  }
};

validateEmail = (email) => {
  if (/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(email)) {
    return true;
  } else {
    return false;
  }
};

 <TextField
  error={errorInputs.email}
  margin="normal"
  fullWidth
  id={"email"}
  value={item.email}
  onChange={(e) => {
    this.handleEmailChange(e);
  }}
  onBlur={() => this.handleBlur("email")}
/>;

edited May 27, 2020 at 11:06

answered May 27, 2020 at 9:05

Ajin Kabeer

2,1862 gold badges12 silver badges20 bronze badges

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

2 Comments

Indushree N Over a year ago

How to implement the same inside Switch

Ajin Kabeer Over a year ago

I have updated the answer with Switch. Do check it out.

Collectives™ on Stack Overflow

To write validation for Email in Reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related