How can I customize the unobtrusive validation JQuery messages in ASP NET MVC?

Question

I have a form, and when it does the unobtrusive validtaion I want it to show:

This message: "Please enter a value."

Instead of this message: "This Field is required."

I tried adding this at the end of my jquery.validate.unobtrusive.js file

(function ($) {
   $.extend($.validator.messages, {
     required: "Please enter a value."
   }); 
}(jQuery));

But it's just not working.

I also trying modifying directly the "messages" variable in jquery.validate.js file but it is not working either.

Could you please tell me how can I get this done?

Tutankhamen

If nothing changed after you modified messages directly inside your jquery.validate.js, it could means that your web browser cache needs to be reset. Or if a localization dedicated script (like message_xx.js ?) is called after jquery.validate.unobtrusive.js or jquery.validate.js : it could hide/override your custom changes. – Monia

@Monia I reset my web brower, Rebuild my project an it keeps doing the same. I don't have a localization dedicated script. And when I check in the developer console of Chrome I can see that the file that is being use has my modifications. -> I got to think that MVC just don't use this messages, it load it from somewhere else. But I don't know where. – Tutankhamen

see view source ,this all messages are on mark up so during initialization like displayFor or EditorFor method inside htmlAttributes specify data- attributes values according to your message.. – Asiatic

Answer 1

If you're using the data annotation attributes and don't want to customize the message for each one (which, it appears by one of your comments that this is the case), I can see two options:

1) Create your own data annotation attribute and set a default message, and change all instances of [Required] to your new attribute.

2) You can try it in jQuery:

// reset the form's validator
$("form").removeData("validator");

// change the text on each required attribute
$(":input[data-val-required]").attr("data-val-required", "Please enter a value");

// reapply the form's validator
$.validator.unobtrusive.parse(document);

I tried this javascript in Chrome's console and everything seemed to work ok. The reason why you need to do this is because 1) the validation rules are cached by the browser so you need to clear them out (See this answer for more information). And 2) all of the error messages are in the html markup once the page is rendered, so that's where you need to change the validation messages.

Hereinbefore

Answer 2

Why don't you use ErrorMeesage on validation attrs

[Required(ErrorMessage="Please enter a value.")]

Edit: From ThisPost, it is another approach:

• Create App_GlobalResources folder for your project (right click to project -> Add -> Add ASP.NET folder -> App_GlobalResources).
• Add a resx file in that folder. Say MyNewResource.resx.
• Add resource key PropertyValueInvalid with the desired message format (e.g. "content {0} is invalid for field {1}"). If you want to change PropertyValueRequired too add it as well.
• Add the code DefaultModelBinder.ResourceClassKey = "MyNewResource" to your Global.asax startup code.

Vaudevillian

Because if use "ErrorMessage" I will need to do that in each and every field which I have required. Instead if I could modify the message I will just need to do it in one place. – Tutankhamen

Answer 3

To avoid having to reset the validator and do another full parse, you can set the attribute early enough in the pipeline that it happens before the initial validator parse:

document.addEventListener("readystatechange", function () {
    if (document.readyState === 'interactive')
    {
        const requiredVals = Array.from(document.querySelectorAll("[data-val-required]"));
        for (let i = 0; i < requiredVals.length; i++) {
            requiredVals[i].setAttribute("data-val-required", "Please enter a value");
        }
    }
}, false);

Unparalleled