CODEWITHSUNDEEP
htmlemail-validation
WEFX
WEFX

Reputation: 8542

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

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.

Upvotes: 169

Views: 87641

Answers (9)

DBS
DBS

Reputation: 9959

You can theoretically have an address without a "." in.

Since technically things such as:

user@com
user@localserver
user@[IPv6:2001:db8::1]

Are all valid emails.

So the standard HTML5 validation allows for all valid E-mails, including the uncommon ones.

For some easy to read explanations (Instead of reading through the standards): http://en.wikipedia.org/wiki/Email_address#Examples

Upvotes: 187

Michael Benjamin
Michael Benjamin

Reputation: 370993

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:

Upvotes: 3

gitaarik
gitaarik

Reputation: 46270

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>

Upvotes: 18

Hari Das
Hari Das

Reputation: 10849

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>

Upvotes: 3

TSlegaitis
TSlegaitis

Reputation: 1310

This pattern always works for me.

Text must in lowercase pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" but I think it covers more or less most emails.

Upvotes: -4

Dorian
Dorian

Reputation: 23929

You can customize the pattern of the email field:

input:valid {
  border-color: green
}

input:invalid {
  border-color: red
}
Email:
<input type="email" required value="[email protected]" /><br>

Non-dots Email:
<input type="email" required pattern="[^.]+@[^.]+" value="[email protected]" />

Upvotes: 3

Ortomala Lokni
Ortomala Lokni

Reputation: 62466

The RFC 822, chapter 6, gives the specification of an address in augmented Backus-Naur Form (BNF):

addr-spec   =  local-part "@" domain
local-part  =  word *("." word)
domain      =  sub-domain *("." sub-domain)

Using this specification a@b is a valid address.

UPDATE

To answer the comment of Trejkaz, I add the following definitions. We see that SPACE are allowed but only in quoted string.

word          =  atom / quoted-string
atom          =  1*<any CHAR except specials, SPACE and CTLs>
quoted-string = <"> *(qtext/quoted-pair) <">
SPACE         =  <ASCII SP, space>
CTL           =  <any ASCII control character and DEL> 
qtext         =  <any CHAR excepting <">, "\" & CR, and including linear-white-space>
quoted-pair   =  "\" CHAR

Upvotes: 15

APAD1
APAD1

Reputation: 13666

Try adding this to the input

pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$"

Fiddle

Upvotes: 32

Ali Alavi
Ali Alavi

Reputation: 2457

Because a@b is a valid email address (eg localhost is a valid domain). See http://en.wikipedia.org/wiki/Email_address#Examples

Also, keep in mind that you should always do the input validation in server. The client side validation should be only for giving feedback to the user and not be relied on, since it can be easily bypassed.

Upvotes: 118

Related Questions