How to set the function $ jQval.unobtrusive.options ErrorPlacement function

Question

What is the correct way to override the ErrorPlacement function in jquery.validate.unobtrusive?

Looking at the jquery.validate.unobtrusive.js script, it looks like the intention of the developers will allow you to apply your own ErrorPlacement function by setting $ jQval.unobtrusive.options.

In the validationInfo (form) function, which defines the errorPlacement function, we see a call to execInContext ("errorPlacement", arguments).

It would seem that if we create the errorPlacement function under $ .validator.unobtrusive.options, then this will be called.

$.validator.unobtrusive.options = { errorPlacement: function () { console.log("hello"); } }; 

The problem is that it has to be configured after jquery.validate.js and before jquery.validate.unobtrusive.js is specified. Otherwise, $ jQval.unobtrusive.options is null and $ form.data (data_validation, result) will no longer be set.

  function validationInfo(form) { var $form = $(form), result = $form.data(data_validation), onResetProxy = $.proxy(onReset, form), defaultOptions = $jQval.unobtrusive.options || {}, execInContext = function (name, args) { var func = defaultOptions[name]; func && $.isFunction(func) && func.apply(form, args); } if (!result) { result = { options: { // options structure passed to jQuery Validate validate() method errorClass: defaultOptions.errorClass || "input-validation-error", errorElement: defaultOptions.errorElement || "span", errorPlacement: function () { onError.apply(form, arguments); execInContext("errorPlacement", arguments); }, invalidHandler: function () { onErrors.apply(form, arguments); execInContext("invalidHandler", arguments); }, messages: {}, rules: {}, success: function () { onSuccess.apply(form, arguments); execInContext("success", arguments); } }, attachValidation: function () { $form .off("reset." + data_validation, onResetProxy) .on("reset." + data_validation, onResetProxy) .validate(this.options); }, validate: function () { // a validation function that is called by unobtrusive Ajax $form.validate(); return $form.valid(); } }; $form.data(data_validation, result); } return result; } 

Another way to handle this is

• set the error $ .validator.unobtrusive.options. Placement function

• remove unobtrusive check

• apply unobtrusive check

   $.validator.unobtrusive.options = { errorPlacement: function () { console.log("errorPlacement"); } }; $("#form_selector").removeData("unobtrusiveValidation"); // reapply the form validator $.validator.unobtrusive.parse(document); 

Or another option is to override the function call.

 var validator = $("#form_selector").data('validator'); var originalFunction = validator.settings.errorPlacement; validator.settings.errorPlacement = function(error,element) { console.log("errorPlacement"); originalFunction(error, element); }; 

What is the correct way to implement my own errorPlacement method?

Answer 1

3 years late, but it turns out I need it today. Unobtrusive code may have been fixed in this timeframe, but your sample code worked fine for me. I added this to one of my site scripts, which was loaded after jquery.validate.js and jquery.validate.unobtrusive.js:

 $.validator.unobtrusive.options = { errorPlacement: function () { console.log("hello"); } }; 

It worked fine, but with one additional catch: this line should be run before the document is ready. The validationInfo method is called in the document ready through this, below jquery.validate.unobtrusive.js :

 $(function () { $jQval.unobtrusive.parse(document); }); 

parse eventually calls validationInfo . The problem with unobtrusive code is when validationInfo sets defaultOptions = $jQval.unobtrusive.options || {} defaultOptions = $jQval.unobtrusive.options || {} . It is clear that if you have not defined unobtrusive options for this point, it will stupidly set defaultOptions to an empty object and never check it again, no matter what you do with $ jQval.unobtrusive.options. If they just deleted || {} || {} , everything will work just fine, as this is just an object reference. Alas...

---

If you cannot set the errorPlacement callback before loading the document or change it dynamically, just add this line to one of your scripts that loads after jquery.validate.js and jquery.validate.unobtrusive.js :

 $.validator.unobtrusive.options = {}; 

This will cause defaultOptions point to an object that you can reference. Then, where you need to, change $.validator.unobtrusive.options , as you would expect. Just be careful not to overwrite the object, since you would not affect the object pointed to by defaultOptions if you did. those. do the following:

 $.validator.unobtrusive.options.errorPlacement: function () { console.log("hello"); }; 

Answer 2

Using Object.assign

After some experiments, I was able to get it to work with the code below (loaded after everything). I am using a bootstrap based theme, so it wants to have an error in the form group container

 Object.assign($.validator.unobtrusive, { options: { errorPlacement: function(error, element) { const container = $(element).closest(".form-group, .form-group-custom"); if (container.length) { container.addClass("has-error"); } }, success: function(error, element) { const container = $(element).closest(".form-group, .form-group-custom"); if (container.length) { container.removeClass("has-error"); } } } }); 

Answer 3

I struggled with this issue for several days, tried almost all possible options. This worked in several cases, but not real. Too many conditions must be met.

What worked for me is to associate "jquery.validate.unobtrusive.min.js" with my script. This worked every time without exception. The binding order may be important, put your script second.

script.js:

 var settings = { errorPlacement: function errorPlacement(error, element) { console.log("hello"); } } $.validator.unobtrusive.options = settings; 

bundelconfig.json (for the .NET environment. Change it for your needs)

 [ { "outputFileName": "wwwroot/js/jquery.validate.unobtrusive.custom.min.js", "inputFiles": [ "wwwroot/lib/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.min.js", "wwwroot/js/script.js" ], "minify": { "enabled": true, "renameLocals": true }, "sourceMap": false } ]