3

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:

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Siyah
  • 2,852
  • 5
  • 37
  • 63

3 Answers3

19

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.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Siyah
  • 2,852
  • 5
  • 37
  • 63
7

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.

Hoon
  • 637
  • 5
  • 10
  • Can you provide more info? What does it do? How to use it in combination with JS / Angular / Ionic / HTML? It's too brief. – Siyah Mar 16 '17 at 13:45
  • 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. – Hoon Mar 16 '17 at 14:10
  • Yeah, but what is re? How do I set it up in the HTML? – Siyah Mar 16 '17 at 14:18
  • 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. – Hoon Mar 16 '17 at 14:27
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,}"
Charlie Echo
  • 87
  • 1
  • 5