asp.net mvc System.ComponentModel.DataAnnotations.EmailAttribute inconsistent validation client vs. server

Question

On an asp.net mvc 5.2.4 model I have an email address field decorated thusly, with the System.ComponentModel.DataAnnotations.EmailAddressAttribute:

    [DataType(DataType.EmailAddress)]
    [EmailAddress(ErrorMessageResourceName = "EmailField", ErrorMessageResourceType = typeof(Messages))]
    public string EmailAddress { get; set; }

It renders html that looks like this, an input of type "email":

<input type="email".../>

If I enter an email address without a full domain (eg "tom@yahoo") it passes client side validation, but it fails server-side validation. I only have to worry about 2 browsers (Chrome and IE 11), and it passes both of them client-side.

I think I understand what is happening. jquery.validate.js, the client-side validation, is following the international standard, which allows for emails without domains. The server-side is using a RegEx expression as long as my arm (see https://referencesource.microsoft.com/#System.ComponentModel.DataAnnotations/DataAnnotations/EmailAddressAttribute.cs) and throwing a validation error.

I'm guessing I'm not the first person to bump into this. Is there an attribute I can decorate an email address field with that corresponds exactly to input type="email" in the browser, so that if an email address passes client-side validation it will always pass server-side validation?

Not quite sure what you claiming here. If you have client side validation enabled, then exactly the same regex is used on the client and server side, and including [DataType(DataType.EmailAddress)] is not required. Have you disabled mvc's client side validation (or not include the jquery.validate.js and jquery.validate.unobtrusive.js scripts)? — user3559349
– user3559349, Commented Feb 26, 2018 at 22:26
@StephenMuecke, yes, I am using jquery unobtrusive validation. The client and server are obviously using different validation though, that is why I posted the question. Are you saying I should remove the DataType attribute? — Tom Regan
– Tom Regan, Commented Feb 26, 2018 at 22:29
Even with the unnecessary [DataType] attribute, "tom@" will not pass mvc client side validation, so I can only assume it must be disabled, or not implemented correctly — user3559349
– user3559349, Commented Feb 26, 2018 at 22:49
I apologize, you are correct of course, "tom@" does not pass client-side validation, I mis-typed the example. What DOES pass client-side validation is "tom@yahoo", but this fails server-side validation. I do have client-side validation implemented correctly. I'm using jquery.validate v1.16.0 and putting a breakpoint on line 1356, and I can see that "[email protected]" passes client-side validation. I can also see that client-side validation uses a different regex than the validation attribute uses on the server-side. — Tom Regan
– Tom Regan, Commented Feb 27, 2018 at 14:13

Kevin LaBranche · Accepted Answer · 2018-02-27 15:15:45Z

1

You could write your own validator. You already know the regex that MS is using and if you feel it is the more accurate/correct for your needs then you can "reuse" (in quotes as you will likely have to format it differently) the regex in your client side validator. This requires that you create your own ValidationAttribute for server side validation & to wire up to the client side you'll implement the IClientValidatable interface & add a method on the js validator.

You have a leg up in that you don't have to write it from scratch either. You can use the source code for the EmailAddressAttribute to get you started.

http://ezzylearning.com/tutorial/creating-custom-validation-attribute-in-asp-net-mvc has a nice writeup.

MVC custom validation: compare two dates has another example of doing both server & client side with comparing two dates but the idea of what to implement & how is the same.

edited Feb 27, 2018 at 15:15

answered Feb 27, 2018 at 15:09

Kevin LaBranche

21.1k5 gold badges55 silver badges77 bronze badges

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

Comments

Tom Regan · Accepted Answer · 2018-02-27 14:46:15Z

0

My workaround is to remove the EmailAddress attribute, copy the regular expression used by client-side validation (jquery.validate.js v1.16.0 line 1356) and use that in a RegularExpression validation attribute, so my code now looks like this:

    [DataType(DataType.EmailAddress)]
    [RegularExpression(EmailRegEx, ErrorMessageResourceName = "EmailField", ErrorMessageResourceType = typeof(Messages))]

Where "EmailRegEx" is a constant with this value:

^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$

answered Feb 27, 2018 at 14:46

Tom Regan

3,8719 gold badges48 silver badges83 bronze badges

Collectives™ on Stack Overflow

asp.net mvc System.ComponentModel.DataAnnotations.EmailAttribute inconsistent validation client vs. server

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related