title: Jquery Validator is not defined
body: <p>I'm trying to add validation to a dynamic input field. What I'm doing is basically hide and show a field (having both loging and register form in 1) like this:</p>
  
  <pre><code>&lt;div id="RegBoxStorage" style="display: none;"&gt;
      @Html.LabelFor(m =&gt; Model.Name)
      @Html.TextBoxFor(m =&gt; Model.Name)
      @Html.ValidationMessageFor(m =&gt; m.Name)
  &lt;/div&gt;
  @using (Html.BeginForm("Login", "Auth", FormMethod.Post, new { id = "AuthForm" }))
  {
  &lt;div id="RegBox" style="display: none;"&gt;
  &lt;/div&gt;
  &lt;div id="LoginBox"&gt;
  
      @Html.LabelFor(m =&gt; Model.Email)
      @Html.TextBoxFor(m =&gt; Model.Email)
      @Html.ValidationMessageFor(m =&gt; m.Email)
  
      @Html.LabelFor(m =&gt; Model.Password)
      @Html.TextBoxFor(m =&gt; Model.Password)
      @Html.ValidationMessageFor(m =&gt; m.Password)
  &lt;/div&gt;
  &lt;input type="submit" id="BtnAuthSub" value="Login" /&gt;
  or &lt;a id="ToggleAuth" href="#"&gt;Sign Up&lt;/a&gt;
  }
  </code></pre>
  
  <p>The script:</p>
  
  <pre><code>$('#AuthForm').removeData("validator");
  $('#AuthForm').removeData("unobtrusiveValidation");
  $.validator.unobtrusive.parse(this.authForm); // error here
  </code></pre>
  
  <p>The plugin:</p>
  
  <pre><code>(function ($) {
    $.validator.unobtrusive.parseDynamicContent = function (selector) {
      //use the normal unobstrusive.parse method
      $.validator.unobtrusive.parse(selector); //Error here
  
      //get the relevant form
      var form = $(selector).first().closest('form');
  
      //get the collections of unobstrusive validators, and jquery validators
      //and compare the two
      var unobtrusiveValidation = form.data('unobtrusiveValidation');
      var validator = form.validate();
  
      $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
        if (validator.settings.rules[elname] == undefined) {
          var args = {};
          $.extend(args, elrules);
          args.messages = unobtrusiveValidation.options.messages[elname];
          //edit:use quoted strings for the name selector
          $("[name='" + elname + "']").rules("add", args);
        } else {
          $.each(elrules, function (rulename, data) {
            if (validator.settings.rules[elname][rulename] == undefined) {
              var args = {};
              args[rulename] = data;
              args.messages = unobtrusiveValidation.options.messages[elname][rulename];
              //edit:use quoted strings for the name selector
              $("[name='" + elname + "']").rules("add", args);
            }
          });
        }
      });
    }
  })($);
  </code></pre>
  
  <p>So when a user clicks <code>ToggleAuth</code>, i move the content from <code>RegBoxStorage</code> to <code>RegBox</code> inside the form. Now I need to manually add the validation to the input. All the unobtrusive validation attributes are already on it. So from this <a href="https://stackoverflow.com/questions/4406291/jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements/5783020#5783020">answer</a>, i tried it and says <code>$.validator is undefined</code>.</p>
  
  <p>But the other parts of the form is actually validated, showing that validation works, I have both jquery.validation and jquery.validation.unobtrusive validation referenced. What could be the problem?</p>
  
  <p>I also took the plugin extension from this <a href="http://xhalent.wordpress.com/2011/01/24/applying-unobtrusive-validation-to-dynamic-content/" rel="nofollow noreferrer">blog</a>.</p>