input tag pattern accepting blank values

Question

I have the following input field:

<input
          type="email"
          id="emailAddr"
          name="emailAddr"
          pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
          placeholder="[email protected]"
        />

Surprisingly, it allows me to enter the empty email field, whereas if I type something and submit it, it shows an error if the email is not valid.

Add a `required` attribute. – Robby Cornelissen Nov 18 '21 at 08:29 — Robby Cornelissen, Nov 18 '21 at 08:29

score 1 · Answer 1 · answered Nov 18 '21 at 08:38

As described in the specification, constraint validation for the pattern attribute is not performed if the input value is an empty string.

You need to add a required attribute to your element:

<input
    type="email"
    id="emailAddr"
    name="emailAddr"
    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
    placeholder="[email protected]"
    required
/>

score 1 · Answer 2 · answered Nov 18 '21 at 08:42

1

Input already allows for email validation, so no need to add in a pattern, just use:

<input type="email" id="email" name="email">

HTML5 Email Validation

answered Nov 18 '21 at 08:42

Lucian Alexe

13
2

Dear @Lucian Alexe: This would not suffice for all scenarios. We need a pattern. It only checks whether @ is used or may be few other stuff. Not all the scenarios. – Imran Rafiq Rather Nov 18 '21 at 08:45
There is no absolute perfect regex, that will allow for all scenarios... Try this: /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/ – Lucian Alexe Nov 18 '21 at 08:54
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 18 '21 at 10:43

input tag pattern accepting blank values

2 Answers2