Html5 pattern attribute not matching for email([email protected])

Question

I am new to HTML5...

Here i am having some problem with email pattern attribute...

1)if i am giving the input like [email protected]... in email field..

2)it's not accepting value and showing "Pattern not matched"..

Help me to fix this....

Here is the snippet of Html

<form name='f1' method="POST" action=""  >     
  <div id="fp">


        <span style="margin-left:-50px">Email:</span>&nbsp;&nbsp;
        <span><input  class="input" type="email" name="Email" placeholder="Enter mailID" required pattern="^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$" ></span><br>


         <input type="submit"  name="submit" value="submit">

   </div>
  </form>

Any suggestions are acceptable....

Take a look at haacked.com/archive/2007/08/21/… — it contains nice examples of valid e-mail addresses, like "Abc@def"@example.com (one of the nice ones). — Josef Kufner
– Josef Kufner, Commented Aug 2, 2017 at 0:31

Ashish Chopra · Accepted Answer · 2013-07-04 07:54:46Z

10

this should be correct pattern

[^@]+@[^@]+\.[a-zA-Z]{2,6}

yes you forgot to consider lower case.

you can refer this document for more details

html5-form-validation-with-regex

answered Jul 4, 2013 at 7:54

Ashish Chopra

1,4599 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

PHP CODER Over a year ago

But it is checking up to @ after that one letter then it is not considering overall.. For Example.... If i typed like user@g it's taking it as a email... but actually [email protected] is the correct format... how can i do that...

Piskvor left the building Over a year ago

That was never correct. Doesn't match internationalized TLDs ([email protected]), or longer TLDs ([email protected])

rofrol Over a year ago

how about ^[^@]+@[^@]+\.[^@]+$ for longer domains?

Marian Zburlea · Accepted Answer · 2015-01-29 16:41:26Z

10

The accepted answer won't validate [email protected] In this case not to miss out all those new domain names emails like http://www.iflove.technology/ you could use:

[^@]+@[^@]+\.[a-zA-Z]{2,}

Used with input type email it looks like this:

<input type="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,}">

answered Jan 29, 2015 at 16:41

Marian Zburlea

9,4474 gold badges35 silver badges37 bronze badges

1 Comment

Jesse Novotny Over a year ago

this still allows for an bad email example like 'hello@world'

ydaetskcoR · Accepted Answer · 2013-07-04 07:52:17Z

4

You need to account for lower cases too. Or make it case insensitive. But in reality you should just use:

^.+@.+$

And send a confirmation e-mail to the address that they should follow because e-mail addresses are reasonably complicated and you'll end up blocking stuff you don't intend to with a regex and it doesn't stop someone putting in a fake e-mail address anyway.

answered Jul 4, 2013 at 7:52

ydaetskcoR

57.4k8 gold badges173 silver badges190 bronze badges

1 Comment

Josef Kufner Over a year ago

This is the only correct regexp in all answers here. The fully-featured regexp to match all possible e-mail addresses is a page long grey rectangle which causes serious headaches — see ex-parrot.com/~pdw/Mail-RFC822-Address.html.

sambatha · Accepted Answer · 2014-09-24 08:44:59Z

1

It is very difficult to validate Email correctly simply using HTML5 attribute "pattern". If you do not use a "pattern" someone@ will be processed. which is NOT valid email.

Using pattern="[a-zA-Z]{3,}@[a-zA-Z]{3,}[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,}" will require the format to be [email protected]

answered Sep 24, 2014 at 8:44

sambatha

1591 silver badge12 bronze badges

1 Comment

Jesse Novotny Over a year ago

still doesn't allow for correct email format such as "[email protected]"

user3384066 · Accepted Answer · 2014-03-05 14:52:33Z

0

I'm using this pattern right now, seems to work just fine:

[a-zA-Z0-9._\-]+@[a-zA-Z0-9.\-]+\.[a-zA-Z]{2,4}

answered Mar 5, 2014 at 14:52

user3384066

11

1 Comment

Piskvor left the building Over a year ago

[email protected] disagrees.

Josef Kufner · Accepted Answer · 2016-01-04 19:18:56Z

0

Simply remove the pattern attribute. The type="email" is enough.

answered Jan 4, 2016 at 19:18

Josef Kufner

3,04728 silver badges29 bronze badges

2 Comments

Jesse Novotny Over a year ago

Not true. HTML5 won't catch a bad email like "hello@world"

Josef Kufner Over a year ago

@JesseNovotny Full check according to RFCs is very hard to get right and impractical to implement. For usual applications it is much better to let libraries and other available tools to do the check for you, even if it is not perfect. To decide that "hello@world" is invalid you need to check that "world" is FQDN. That is too complex job for a text input. For example "spam@ai" is a valid e-mail address.

Hiep Dinh · Accepted Answer · 2016-01-04 19:08:33Z

-1

My solution to override html5 validation type='email'. I run this code after DOM loaded

$(document).ready(function(){
  $('input[type=email]').attr('pattern', "^([\\w]+[\\.]{0,1})+@([\\w-]+\\.)+[\\w]{2,4}$").attr('type', 'text').attr('title', 'Please enter an email address')
})

answered Jan 4, 2016 at 19:08

Hiep Dinh

6525 silver badges9 bronze badges

2 Comments

Piskvor left the building Over a year ago

[email protected] disagrees.

Jesse Novotny Over a year ago

hello@world disagrees

Collectives™ on Stack Overflow

Html5 pattern attribute not matching for email([email protected])

7 Answers 7

3 Comments

1 Comment

1 Comment

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

1 Comment

1 Comment

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related