title: jQuery unobstrusive validation fetch server response and display it
body: <p>I have a form like following: </p>
  
  <pre><code>@using (Html.BeginForm("DoRegister", "User", FormMethod.Post))
      {
          @Html.AntiForgeryToken()
          &lt;div class="inputBox"&gt;
  
  
              @Html.TextBoxFor(m =&gt; m.FirstName, new { @class = "form-control", @type = "text", @aria_describedby = "emailHelp" })
              &lt;label&gt;First name&lt;/label&gt;
              @Html.ValidationMessageFor(model =&gt; model.FirstName, "", new { @class = "text-danger", @style = "float:right;" })
          &lt;/div&gt;
          &lt;div class="inputBox"&gt;
  
  
              @Html.TextBoxFor(m =&gt; m.LastName, new { @class = "form-control", @type = "text", @aria_describedby = "emailHelp" })
              &lt;label&gt;Last name&lt;/label&gt;
              @Html.ValidationMessageFor(model =&gt; model.LastName, "", new { @class = "text-danger", @style = "float:right;" })
          &lt;/div&gt;
          &lt;div class="inputBox"&gt;
  
  
              @Html.TextBoxFor(m =&gt; m.Email, new { @class = "form-control", @type = "email", @aria_describedby = "emailHelp" })
              &lt;label&gt;Email&lt;/label&gt;
              @Html.ValidationMessageFor(model =&gt; model.Email, "", new { @class = "text-danger", @style = "float:right;" })
          &lt;/div&gt;
          &lt;div class="inputBox"&gt;
              @Html.TextBoxFor(m =&gt; m.Password, new { @class = "form-control", @type = "password" })
              &lt;label&gt;Password&lt;/label&gt;
              @Html.ValidationMessageFor(model =&gt; model.Password, "", new { @class = "text-danger", @style = "float:right;" })
  
          &lt;/div&gt;
          &lt;div class="inputBox" style="overflow: hidden;clear: both;height: 80px;"&gt;
              &lt;div class="g-recaptcha" style="padding-top:15px; float:left;transform:scaleX(1.385) !important;-webkit-transform:scaleX(1.385) !important;transform-origin:0 0;-webkit-transform-origin:0 0;" data-sitekey="somekey"&gt;&lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;button type="submit" class="btnregister"&gt;Create Account&lt;/button&gt;
      }
  </code></pre>
  
  <p>For this form I've enabled jQuery unobstrusive validation where I added these script tags:</p>
  
  
  
  
  
  
  
  <p>Bingo, it works like expected! Now I'm just missing the part where I wanna handle the response from the server when the form is submitted... </p>
  
  <p>For example I have tried:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('form').submit(function (event) {
              event.preventDefault();
  
              if ($(this).valid()) {
                  var formdata = new FormData($(this).get(0));
  
                  $.ajax({
                      url: this.action,
                      type: this.method,
                      data: formdata,
                      processData: false,
                      contentType: false,
  
                      success: function (result) {
                          // element is div holding the ParticalView
                          alert("OK!");
                      }
                  });
              }
              return false;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>In this part:</p>
  
  <pre><code> if ($(this).valid()) {
  </code></pre>
  
  <p>I'm getting an error: </p>
  
  <pre><code>Uncaught TypeError: $(...).valid is not a function
  </code></pre>
  
  <p>And these are the scripts that I've included:</p>
  
  <pre><code>&lt;script type="text/javascript" src="~/siteContent/frontpage/js/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src='@Url.Content("~/siteContent/js/jquery.validate.min.js")'&gt;&lt;/script&gt;
  &lt;script src='@Url.Content("~/siteContent/js/jquery.validate.unobtrusive.js")'&gt;&lt;/script&gt;
  </code></pre>
  
  <p>What am I doing wrong here??</p>
  
  <p>Can someone help me out?</p>