Why does HTML5 form-validation allow emails without a dot?

user_590719 0
Viewed 70719

I'm writing a very simple mock-up to demonstrate some HTML5 form-validation. However, I noticed the email validation doesn't check for a dot in the address, nor does it check for characters following said dot.

In other words, "john@doe" is considered valid, when it's clearly not a valid email address; "doe" isn't a domain.

This is how I'm coding my email field:

<input type="email" required />

Is that not enough?

Check this fiddle to see what I mean.

Note: I know how to accomplish this via a RegEx pattern instead. I'm just wondering how someone could get away with using the email type instead.

email-validation html
9 Answers

This MDN page shows the regex browsers should use to validate the email:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/email#Validation

You can slightly change this regex to require at least one dot in the domain name: change the star * at the end of the regex to a plus +. Then use that regex as the pattern attribute:

<form>
  <input
    type="email"
    pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$"
    title="Valid e-mail address including top-level domain"
    required
  />
  <button type="submit">Test</button>
</form>

user_12481750

Here is how you can do it with html5 using regex pattern. You can also include a custom message to display.

<form>
  <input type="email" value="paul@test" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$" title="Hey, you are missing domain part in the email !!!"/>
  <button type="submit">Click Me</button>
</form>

user_24735050

Hostnames without a TLD appear to be valid.

I say "appear" because there is this 2013 ICANN prohibition on dotless domains . . .

At its meeting on 13 August 2013, the ICANN Board New gTLD Program Committee (NGPC) adopted a resolution affirming that "dotless domain names" are prohibited.

. . . but judging from real world experience, it appears to have never been enforced.

Regardless, the PHP function FILTER_VALIDATE_EMAIL doesn't allow for dotless domain names.

So here's a simple back-end validation set-up that covers both your email and required fields:

if (empty($required_field) OR empty($another_required_field) OR
    !filter_var($email_field, FILTER_VALIDATE_EMAIL)) {
    // error handling here
    exit;
    }

While the "malformed" email may get passed the browser, it won't get passed the server.

References:

user_35972760
Related