I have noticed that this is a pain in the ass. The HTML5 validator with type="email" seems like it's not working in Ionic (View). I tried every possible way, but it's not working.
I am using:
Ionic (View)
Angular
HTML5
This is my HTML right now:
<input class="testinput" type="email" name="email" ng-model="userRegistration.email" type="text" pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]*\.([a-z]{2,4})$/" required>
Also tried this with type="text"
, but also not working. I can just validate the form while I am using an e-mailadress like: "blablabla" where I don't use a @
symbol, which is wrong, of course.
What I also so tried, is: [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,63}$
and ng-pattern
, yet I don't get an error and I can just register with random texts, without being stopped by the validators.
So my question is: how can I fix this? What is the best way to fix this?
I've checked:
- How to validate email id in angularJs using ng-pattern
- Why does HTML5 form-validation allow emails without a dot?
I fixed it myself. All other possible solutions were not working for me. This one works, though:
<input type="email" name="email" ng-model="someModelIamUsing" pattern="[A-Za-z0-9._%+-]{3,}@[a-zA-Z]{3,}([.]{1}[a-zA-Z]{2,}|[.]{1}[a-zA-Z]{2,}[.]{1}[a-zA-Z]{2,})">
Perhaps others can benefit from this too, that's why I am adding it here.
This is what I'm using and it's working good so far.
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if(!re.test(userEmailAddressFromInput)) {
// Invalid Email
}
This checks the email variable using regular expression pattern and the test method.
For more information about test method, please see this.
The pattern should include hyphens (-) and the domain name may just have 2 letters before the country code (ge.com)
Also, there may be numerous sub-domains (department.product.company.country)
So I use the following simple pattern:
pattern="[A-Za-z0-9._%+-]{2,}@[a-zA-Z-_.]{2,}[.]{1}[a-zA-Z]{2,}"