How can I make validation of email in Ionic using HTML5, JS or Angular work?

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

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.