EmailAttribute is not validating correctly in a ViewModel from ASP.NET Core

Question

This is a field located in my viewmodel:

[Required(ErrorMessage = "Email is missing."), EmailAddress(ErrorMessage = "Email is not valid.")]
public string Email { get; set; }

(EmailAddress is from the EmailAddressAttribute.EmailAddressAttribute() type)
This is the relevant part from the HTML:

<div>
    <label for="inputEmail">EMAIL</label>
    <input id="inputEmail" ng-model="email" asp-for="Email" class="form-control" />
</div>
<div>
    <span asp-validation-for="Email" class="text-danger"></span>
</div>

When I type myemail in the email text box, it will say

Email is invalid

However, when typing myemail@email, it will be viewed as correct by the view-model (only on the front-end).

public async Task<JsonResult> Register([FromForm]VisitViewModel vm)

Casting like this properly puts the ModelState on invalid and rejects the email, so that part is okay.

According to this answer though, the frontend should indicate this as invalid

Can anybody explain what is happening here? I'm at an absolute loss.

Collodion

i think the email is valid :3 – Unending

'myemail@email' is valid according to you? Seems weird since there is no '.net' or '.com' or whatever behind it, but what you might think is besides the point since EmailAddressAttribute should return false in this case. (Which it does correctly on the backend, 'myemail@email' is invalid there but valid on the frontend) – Collodion

if you know that it is wrong in the first place, why not change the validator in the front end. It is easy to validate it using javascript – Unending

Because I am working in ASP.net core, if for whatever reason I wanted to change the email field to a text or number field, it should change the validation or anything else related to this field by itself. I should not go inside every javascript file and change it myself. I know how to make it work, but not how to make it work properly. – Collodion

I confirm I get the same result trying in my app with myemail@email so either it is a bug or that is considered a valid email. I think it is important to verify email by sending a confirmation link in any case, but this is an interesting issue and I would like to know if Microsoft considers it a bug or not – Kerbing

this is not just a javascript issue, it passes server side model state validation as well – Kerbing

Answer 1

There are inconsistencies in the way emails are validated between client and server.

Client side

jQuery Validation uses a regular expression defined in the HTML standard. According to that expression, email@email is a valid email address.

Server side

The .Net EmailAddressAttribute has it's own regular expression, which you can find here. According that that expression, email@email is an invalid email address.

But it gets even more confusing! If you're creating a .Net Core app, targeting cross platform uses the CoreFX version of the attribute which doesn't appear to use a regular expression at all. According to that method, email@email is a valid email address.

You see it for yourself by switching around values in the project.json of a Core Console App:

public static void Main(string[] args)
{
    var attr = new EmailAddressAttribute();
    var email = "email@email";
    var isValid = attr.IsValid(email); // false with "net452", true with "netcoreapp1.0"
}

What you can do

The quickest fix that I can think of would be to change the regular expression in the jQuery Validate email method to match the one from .Net, or create your own validation method to add to it which checks for this particular case.

You can also just fallback on returning errors from the server which would show them a validation message for whatever is wrong with the ModelState. It wouldn't be a real-time error but they would still get a nice message to deal with the improper email.

Lithic