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?

Solution 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.

Solution 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.

Solution 3

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

Comments

[Siyah]

Can you provide more info? What does it do? How to use it in combination with JS / Angular / Ionic / HTML? It's too brief.

[Hoon]

Sorry I forgot to mention, so it's just a simple javascript. You wouldn't worry too much about mixing with Angular and Ionic. Just give it a try.

[Siyah]

Yeah, but what is re? How do I set it up in the HTML?

[Hoon]

I see. variable 're' and 'userEmailAddressFromInput' are just example variables I created. You can named them whatever you wish to. To apply this, simply put the code into your main javascript file. And be sure that variable 'userEmailAddressFromInput' receives email input value correctly.

[Anuj]

Working fine for me .Thanks

[RushVan]

Well played! Worked for me. Muchas gracias!