Question

I have a form so when user click on edit button then the text replace with input type=”email” and also matches the given patterns of email

               <label for="name-c">Email-Id:</label>
             <label class="email">[e-mail]</label>
                 <button class="edit">edit</button>

Jquery code:

$('.edit').click(function () {
  var email=$('.email').text();
   $('.email').replaceWith(function () {
     var pattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/;
     return '<input type="email" id="email" name="email" title="Enter email like [e-mail]" required placeholder="[e-mail]"   pattern="' + pattern + '"'+'class="ui-input-text ui-body-c ui-corner-all ui-shadow-inset"/>'});
     $('#email').val(email);});

I am getting error message please type the given pattern though it is right.
But when I matching by simple placing by input type="email" followed by pattern then its matching.I totally confused where my code is incorrect.

Answer 1

I think you don’t need a pattern. When you specified the type="email" it is the navigator which control the value. I test [here][1] with the default param and it works for me with chrome and firefox. But when I add a pattern like “.*” the check fails it is curious.

Int the specification given by W3C they allow the attribute pattern but when you scroll down to value they the value is check with a specified value.

So you don’t need to add the pattern the check is implicit.

EDIT :

Try with this regexp ^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)+$ I take the regexp defined in w3c specifcation and I change the final * by a +.

EDIT :

Finally I found the mistake in fact it misses a backslashes when you add the input with jquery here the solution http://jsfiddle.net/KaBut/6/