Phoenix form e-mail validation

I have some troubles with E-mail validations inside of the form:

<%= text_input f, :email, placeholder: "e-mail", class: "form-control", required: true, pattern: (\w+)@([\w.]{2,3})\.([\w.]{2,3}) %>

The browser recognizes the pattern but it does not work properly. It always pops an error.
I tried many different e-mail validations and at the end I get the same result.

2 Likes

You could use email_input instead of text_input and it will validate emails for you. Another nice perk of using that field is it optimizes character layouts on mobile devices to make it easier to enter an email address.

But, don’t forget to validate your email address on the server side with a changeset. Never trust information from the client directly. Someone could easily change the HTML from email_input to text_input or remove your pattern, etc…

6 Likes

Also keep in mind that accurately validating email addresses is still best be done by confirming it via an actual email sent to the address. Regexes so short as yours will never match all the crazy addresses, which are actually valid based on the spec: https://en.wikipedia.org/wiki/Email_address#Examples

5 Likes

It works that way… Kinda… It stops when I write , for example, “abv@abc” . It does not count the patern: "..." . The validation dissapears at the first letter after @.

Why do you use that pattern? Do you want to restrict the field to some special mail addresses only?

I would suggest to use email_input without an additional pattern. There is no good regex to test for an email address (read more over here: https://davidcel.is/posts/stop-validating-email-addresses-with-regex/)

2 Likes

And a small tip for working with regex expressions. Use an online tool like https://regex101.com to check and understand the regex term.

By this you will pretty fast find a few of the errors with that regex:

(\w+)@([\w.]{2,3})\.([\w.]{2,3})

  • (\w+) does not include . so something like hris.lastname in front of the @ will not work
  • ([\w.]{2,3}) matches only 2 or 3 characters so @gmail is not valid for this regex
  • \.([\w.]{2,3}) something like a .ninja toplevel domain will not match
2 Likes

In my case, pattern does not work, although my browser sees it. I tried different regex combinations. I want to restrict the field for specific emails like @gmail.com. I have changeset validation but I also need it to be in the form.

Can you give more detail on this? Do you get any validation message at all? Do you see an error? Does it submit the form without checking the regex?

What browser are you using? What are the exact steps you are trying?

I just tried an minimal example at https://jsfiddle.net/uq65mwgh/4/

The html i used is this:

<form action="">
  <input type="email" pattern="a.*">
  <input type="submit">
</form>

This works for me in the following way:

  • if i click submit with an empty input field I get the email validation error
  • if i enter something like foo@bar.de and click on submit I get the validation error from the regex (the regex simply checks for an email address starting with the character a
  • if i enter afoo@bar.de the browser submits the form
2 Likes

We have a Global SaaS platform and email is really important to us.
After several issues with non RFC compliant systems (like Sendgrid), we implemented a combination of Trim, Downcase, Regex, Email Checker and Unidecode.

Regex - Regex.match?(~r/^[A-Za-z0-9\._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,6}$/, email)
Email Checker - https://hex.pm/packages/email_checker
Unidecode - https://hex.pm/packages/unidecode

4 Likes

Awesome job!

One remark though:

That’s rare but, some SMTP define a catchall email address. Meaning all emails using this domain seems valid even if they are not.

I plan to set my email exactly like that. And then I will have emails like hackernews@mydomain.com or linkedin@mydomain.com etc. so I can keep track of which organization got my email from where.

Your package wants to deem such addresses invalid? I understand some spam orgs use techniques like these but many people use them with valid reasons.

1 Like

Stackoverflow thread on general email validation:

1 Like
         <%= text_input f, :customeremail, [required: "true",class: "form-control", type: "email"]%>

This adds Html attribute type=“email”

*class=“form-control” for boostrap

1 Like

Hi. You may check the acceptable email regex patterns and write one for yourself.