form validation in mobile

Question

When we are viewing our forms in mobile, I noticed that all validation goes away and I can simply submit my email address without any "@" or ".". I thought I had taken care of this with the pattern attribute and it works seamlessly on desktop, but not in mobile. Any ideas on what I'm doing wrong here?

   <input type="email" name="email" placeholder="type your email..." class="textInput defaultText required email input-text" pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" />

Answer 1

For some reason most phone browsers don't prevent a form submission when there is invalid data, although most do support the API involved.

See http://www.telerik.com/blogs/four-options-for-mobile-form-validation#html5 for a good discussion