Pattern attribute not accepting the email

Question

I am new to HTML5......

My problem is after applying pattern to the email field.. and enter email like this ... user@gmail.com ,it is not accepting it...

It showing some message like pattern not matched...

Hers 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...

Answer 1

Your pattern does not allow for lowercase characters.

See http://www.w3.org/TR/html5/forms.html#the-pattern-attribute

The pattern is compiled with the ignoreCase flag disabled.

Try this instead: pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,4}$"