How can I make validation of email in Ionic using

Question

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?

Answer 1

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.

Answer 2

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,}"

Answer 3

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.