title: How to set $jQval.unobtrusive.options ErrorPlacement function correclty
body: <p>What is the proper way to override the ErrorPlacement function in jquery.validate.unobtrusive?</p>
  
  <p>Looking at the jquery.validate.unobtrusive.js script it appears that the developers intention would allow you to apply your own ErrorPlacement function by setting $jQval.unobtrusive.options.</p>
  
  <p>In the validationInfo(form) function that defines the errorPlacement function we see a call to execInContext("errorPlacement", arguments).</p>
  
  <p>It would seem that if we create a errorPlacement function under $.validator.unobtrusive.options then this will be called.</p>
  
  <pre><code>   $.validator.unobtrusive.options = {
          errorPlacement: function () {
              console.log("hello");
          }
      };
  </code></pre>
  
  <p>The issue is that this must configured after jquery.validate.js and before jquery.validate.unobtrusive.js is referenced. Otherwise $jQval.unobtrusive.options is null and $form.data(data_validation, result) will not be set again.</p>
  
  <pre><code>    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 &amp;&amp; $.isFunction(func) &amp;&amp; func.apply(form, args);
          }
  
      if (!result) {
          result = {
              options: {  // options structure passed to jQuery Validate's 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;
  }
  </code></pre>
  
  <p>The other way to get deal with this is to </p>
  
  <ol>
  <li><p>set the $.validator.unobtrusive.options error Placement Function</p></li>
  <li><p>remove the Unobtrusive Validation</p></li>
  <li><p>re apply the unobtrusive validation</p>
  
  <pre><code>$.validator.unobtrusive.options = {
      errorPlacement: function () {
          console.log("errorPlacement");
      }
  };
  
  
  $("#form_selector").removeData("unobtrusiveValidation");
  
  // reapply the form's validator
  $.validator.unobtrusive.parse(document);
  </code></pre></li>
  </ol>
  
  <p>Or the other option would be to override the function call.</p>
  
  <pre><code>var validator = $("#form_selector").data('validator');
  var originalFunction = validator.settings.errorPlacement;
  validator.settings.errorPlacement = function(error,element) {
      console.log("errorPlacement");
      originalFunction(error, element);
  };
  </code></pre>
  
  <p>Which is the proper way of implementing your own errorPlacement method?</p>