css - React html text email validation keep saying please match the format required

Question

I have simple form in react and form has got an email input textbox. I am using pattern for email validation. It worked in another page but the same validation not working in another page and it throws 'Please match the format required' when i click on submit button

const emailPattern = '^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$';

  <InputText
    key="contactEmail"
    label="Email address"
    defaultValue={employer.contact ? employer.contact.email : ''}
    type="text"
    id="email"
    name="email"
    fullWidth={true}
    pattern={emailPattern}
    message="Valid email address required"
    onChange={(e) => {
      handleChange(e.currentTarget.value, 'contact.email');
    }}
  />

question from:https://stackoverflow.com/questions/65846786/react-html-text-email-validation-keep-saying-please-match-the-format-required

Answer 1

Waitting for answers