Add input validation to html input in React

Question

Having this input:

const REGEX_EMAIL_VALIDATION = /^(([^<>()[\]\\.,;:\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,}))$/;

...

<input
   pattern={REGEX_EMAIL_VALIDATION}
   type="email"
   value={field.value || ''}
   onChange={(e) => handleChangeEmail(id, e)}
/>

I've tried like this but it seems to let any input, it doesn't verify the pattern.

I would like to show a message while the user types the input if the value is not correct. In this case - if it doesn't have email shape.

did you try out my answer? Consider giving some feedback

axtck
– axtck

2021-06-18 12:46:16 +00:00
Commented Jun 18, 2021 at 12:46 — axtck
– axtck, Commented Jun 18, 2021 at 12:46

axtck · Accepted Answer · 2021-06-10 11:52:24Z

You can conditionaly render an error message based on testing against your regular expression (RegEx.test(value) ? true : false).

import { useState } from "react";

export default function App() {

  const [email, setEmail] = useState(""); // state value for email
  const REGEX_EMAIL_VALIDATION = /^(([^<>()[\]\\.,;:\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,}))$/;

  const handleEmailChange = (e) => {
    setEmail(e.target.value); // set email to value from input
  }
  
  // render
  return (
    <div>
      <input name="email" value={email} onChange={handleEmailChange}></input>
      {
        REGEX_EMAIL_VALIDATION.test(email) ? <small>valid</small> : <small>invalid</small>
      }
      <p>{email}</p>
    </div>
  );
}

Try it out in this Sandbox.

Shailesh Mishra · Accepted Answer · 2021-06-10 11:56:22Z

Please try this

const re =
  /^(([^<>()\[\]\\.,;:\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,}))$/;

const handleOnChange = (e) => {
  if (re.test(e.target.value)) {
    // this is a valid email address
    // call setState({email: email}) to update the email
    // or update the data in redux store.
  } else {
    // invalid email, maybe show an error to the user.
  }
};

Collectives™ on Stack Overflow

Add input validation to html input in React

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related