Change mvc form validation error messages

Question

I am trying to change the data-val-required attributes of my form fields so that I get a generic "required" appear. Now I know that I can do this using the following:

@Html.TextBoxFor(model => model.Name, new { data_val_required ="required" })

But I don't want to "hard code" it into the template like that, I would prefer the model to use the required attribute set on it and then override it through js using something like this:

$('input, select, textarea').each(function () {
    var element = $(this);
    if (element.data('val-required')) {
        element.data('val-required', 'required');
    }
});

I've run this on document ready and checked the data attributes have changed (which they have) but apparently this is happening too late for the validation to take note of it. So I need to know when MVC binds it's form validation so I can run this before or how to change the error messages clientside only.

I've looked through the source of the page and just can't see where the validate gets instantiated.

For those saying change the required attribute or do it server side, I don't want to do this as if I have js disabled I display a validation summary at the top of the form which will be pretty useless if they all just say required. That is why I want to do this client side only

enter image description here

possible duplicate of [MVC: Override default ValidationMessage](http://stackoverflow.com/questions/1808097/mvc-override-default-validationmessage) — , May 15 '15 at 12:03
And more options [here](http://stackoverflow.com/questions/6214066/how-to-change-default-validation-error-message-in-asp-net-mvc) — , May 15 '15 at 12:04
Just set `[Required]` on the `Name` property, then make sure you have jquery unobtrusive validation references included. — Mathew Thompson, May 15 '15 at 12:06
@StephenMuecke all the answers there require server side changes, I want to do this clientside only. If js is disable, I display the validation summary with the correct message. If done in any of the ways you have linked to then it would change the validation summary too, so no this is not a duplicate — Pete, May 15 '15 at 12:08
Why are you wanting to set this only on the client side? Your server and client validation should be the same, governed by attributes in your model properties — Mathew Thompson, May 15 '15 at 12:10
Can't understand why you would do this, but your script would need to come before `jquery.validate.unobtrusive.js` (which parses the form so any changes made after are ignored by the validator) — , May 15 '15 at 12:12
@mattytommo because the clientside validation appears next to the textbox and the full error message is spoiling the look and layout, where as the server side validation will appear at the top of the form as an error list and therefore needs to be the full error message — Pete, May 15 '15 at 12:13
@Pete Well if you don't want it to appear next to the textbox then remove the `ValidationMessageFor` for those fields? — Mathew Thompson, May 15 '15 at 13:27

score 2 · Accepted Answer · answered May 15 '15 at 12:30

For those of you interested in the solution, the following will reset the validation messages:

(function () {
    $('input, select, textarea').each(function () {
        var element = $(this);
        if (element.data('val-required')) {
            element.attr('data-val-required', 'Required'); // please note this has to be the attr not data
        }
    });

    form = $('form');
    form.removeData("validator").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse(form);
});

score 2 · Answer 2 · edited May 23 '17 at 12:07

2

I think you can achieve this with data annotations. Just mark the model items as

[Required]

If you want to override the error message just do this

[Required(ErrorMessage = "Name is required")]

See this post: Error messages for model validation using data annotations

edited May 23 '17 at 12:07

Community

1
1

answered May 15 '15 at 14:28

Hunter Nelson

1,707
3
20
37

score 1 · Answer 3 · answered May 15 '15 at 13:30

1

You really don't want to be doing this in the JavaScript and manipulating attributes, this is perfectly achievable in Razor.

Simply have your ValidationSummary not exclude individual property errors:

@Html.ValidationSummary(false)

And then remove all your ValidationMessageFors for all the fields.

answered May 15 '15 at 13:30

Mathew Thompson

55,877
15
127
148

Hi mattymoo, perhaps this graphic will explain it better and why I only want the js version to change: http://i.imgur.com/fUscyYy.jpg as you can see from the js version, if they had the full length error message, it would make the form look quite messy as the red boxes would overlap the other textboxes, where as if you didn't have the full error messages when js was disabled (ie it just said required) then the error summary wouldn't be very useful. This is the reason I only want to change the error message in js – Pete May 15 '15 at 14:25

Change mvc form validation error messages

3 Answers3