input type = email jquery validate overriding mvc data annotation

Question

I have the following property on my viewmodel:

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

In MVC4, because of the DataType annotation, this is rendered as <input type="email"... which is great for devices that change the keyboard to include @ such as the ipad. Unfortunately, jquery.validate seems to automatically validate the field using its own regex so if a user enters an incorrect email, the jquery validate error message is shown and not the one I defined in the attribute.

What is the best way to stop jquery.validate doing this automatic validation so that my regex is used instead?

Because of this issue my localized messages are not working. I'm guessing it requires an update to the unobstrusive library. — Max Toro, May 15 '13 at 02:49

score 1 · Answer 1 · edited May 23 '17 at 12:02

1

In short the answer for this is that MVC does not support automatically overriding JQuery validation message, or suppressing the validation.

However you can relatively easily localize the JQuery validation. Here are a few examples of how to do that:

How to change JQuery validation text directly

JQuery validation localization plug in

** Warning - I have not tested these myself, but in general you want to include your scripts right after the JQuery reference on your page

edited May 23 '17 at 12:02

Community

1
1

answered May 17 '13 at 01:17

Yishai Galatzer

8,791
2
32
41

thx but not ideal to have completely separate client and server side validation regex and error message - that's one of the main benefits of using data annotations. – Paul Hiles Aug 17 '13 at 21:03

score 1 · Accepted Answer · edited May 23 '17 at 10:09

1

Found this answer by Dave Ward suggesting a workaround which does not involve changing external js libraries.

Just add the following after your jquery and jquery.validate includes:

$.validator.methods.email = function (value, element) {
    return this.optional(element) || true; };

edited May 23 '17 at 10:09

Community

1
1

answered Aug 17 '13 at 21:01

Paul Hiles

9,558
7
51
76

The input type was set to text, but this still fixed the issue when using Razor pages. Thanks. – Fordy Jan 14 '22 at 13:35

input type = email jquery validate overriding mvc data annotation

2 Answers2