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?

georgeawg · Accepted Answer · 2019-09-22 04:43:19Z

20

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.

edited Sep 22, 2019 at 4:43

georgeawg

49k13 gold badges78 silver badges98 bronze badges

answered Apr 14, 2017 at 8:12

Siyah

2,9077 gold badges40 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RushVan Over a year ago

Well played! Worked for me. Muchas gracias!

Hoon · Accepted Answer · 2017-03-16 14:07:46Z

8

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.

edited Mar 16, 2017 at 14:07

answered Mar 16, 2017 at 13:36

Hoon

6975 silver badges10 bronze badges

4 Comments

Siyah Over a year ago

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 Over a year ago

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 Over a year ago

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

Hoon Over a year ago

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.

Charlie Echo · Accepted Answer · 2017-10-13 11:15:06Z

4

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

answered Oct 13, 2017 at 11:15

Charlie Echo

1071 silver badge5 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related