title: MVC Validate and post to controller with jquery ajax
body: <p>I am kind of new to jquery ajax. I am tring to learn client side jquery validation without using the DataAnnotations. when I press the login button the page refreshes doesn't post to the controller's Login(User x) method using the ajax post. I am not a expert any advice and suggestions will be greatly appreciated.</p>
  
  <p>My model</p>
  
  <pre><code>public class User
  {
      public String UserName { get; set; }
      public String Password { get; set; }
  }
  </code></pre>
  
  <p>My controller</p>
  
  <pre><code>public class LoginController : Controller
  {
    [HttpPost]
      public bool Login(User x)
      {
          return false;
      }
  
      public ActionResult LoginTst()
      {
          return View();
      }
  }
  </code></pre>
  
  <p>The view is LoginTst &amp; the script     </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function()
      {
          $("#signin").click(function ()
          {
             
                  $("#loginForm").validate({
                      rules: {
                          UserName: {
                              required: true,
                              minlength: 2,
                              maxlength: 15
                          },
                          Password: {
                              required: true,
                              minlength: 5,
                              maxlength: 18
                          }
                      },
                      messages: {
                          UserName: {
                              required: "username req",
                              minlength: "user is small",
                              maxlength: "user is long"
                          },
                          Password: {
                              required: "pass req",
                              minlength: "pass is small",
                              maxlength: "pass is long"
                          }
                      },
                      submitHandler: function (form) {
                          var form = $('#loginForm');
                          $.ajax({
                              cache: false,
                              async: true,
                              type: "POST", 
                              url: form.attr('Login'), // the action it 
                              data: form.serialize(),
                              success: function (data) {
                                  if (data == false) {
                                      alert("Username doesn't exist");
                                  }
                              }
                          });
                      }
  
                  });
  
              });
  
          
      });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="" name="loginForm" id="loginForm"&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="text" class="form-control" placeholder="Username" id="UserName" name="UserName"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;input type="password" class="form-control" placeholder="Password" id="Password" name="Password"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
          &lt;button class="btn btn-warning btn-block" type="submit" id="signin"&gt;login&lt;/button&gt;
          &lt;/div&gt;   
       &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What am i doing wrong?</p>