title: JQuery Mobile validation and AJAX POST form submission
body: <p>In the following code snippet, I am trying to build a login page using JQuery Mobile. I try to validate the inputs using JQuery validation blugin. If the validation went OK, I use AJAX to post the login data to a PHP code in the server.
  This is what my code is supposed to do, however, all it does is redirecting me to the first page (language selection screen). Could you please help me to find out what is wrong with my code. Thank you</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt; 
  &lt;head&gt; 
     &lt;meta charset="utf-8"&gt; 
     &lt;title&gt;&lt;/title&gt; 
     &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"&gt;
     &lt;script src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt; 
     &lt;script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"&gt;&lt;/script&gt;
     &lt;script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"&gt;&lt;/script&gt;
     &lt;script src="jquerytest.js"&gt;&lt;/script&gt;
     &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt; 
  &lt;body&gt;
   &lt;!-- Select Language Screen --&gt;
   &lt;div data-role="page" data-theme="c" id="select_language_screen"&gt;
       &lt;div data-role="header"&gt; 
             &lt;h1&gt;Header&lt;/h1&gt; 
       &lt;/div&gt; 
       &lt;div data-role="content"&gt;     
             &lt;ul data-role="listview" data-inset="true" data-dividertheme="b" id="listview_language"&gt; 
                   &lt;li data-role="list-divider"&gt;Select a langauge&lt;/li&gt;
                   &lt;li data-name="en"&gt;&lt;a href="#login_screen"&gt;English&lt;/a&gt;&lt;/li&gt;
             &lt;/ul&gt;            
       &lt;/div&gt;   
      &lt;div data-role="footer" data-position="fixed"&gt;
       &lt;h4&gt;Footer &lt;/h4&gt;
      &lt;/div&gt;
   &lt;/div&gt;
   &lt;!-- Login Screen --&gt;
   &lt;div data-role="page" id="login_screen" data-add-back-btn="true"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;Header&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div data-role="content"&gt;
          &lt;form id="login_form"&gt;
              &lt;div data-role="fieldcontain"&gt;
                  &lt;label for="mobile_number" id="login_mobile_no_label"&gt;Mobile Number&lt;/label&gt;&lt;br&gt;
                  &lt;input type="text" name="mobile_number" id="login_mobile_no_input" class="required number"/&gt;&lt;br&gt;&lt;br&gt;
  
                  &lt;label for="password" id="login_password_label"&gt;Password&lt;/label&gt;&lt;br&gt;
                  &lt;input type="password" name="password" id="login_password_input" class="required"  /&gt;
                  &lt;h3 id="notification"&gt;&lt;/h3&gt;
                  &lt;button data-theme="b" id="submit" type="submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;h3&gt;Footer&lt;/h3&gt; 
      &lt;/div&gt;
      &lt;script&gt;
          function onSuccess(data, status)
          {
              data = $.trim(data);
              $("#notification").text(data);
          }
  
          function onError(data, status)
          {
              $("#notification").text("Could not connect to the server!");
          }        
  
          $(document).ready(function() {
              $("#submit").click(function(e){
                  e.preventDefault();
                  var validator = $(form_id).validate({
                      invalidHandler: function() {
                          if(validator.numberOfInvalids() &lt;= 0)
                          {
                              var form = $("#login_form");
                              $("#submit",form).attr("disabled","disabled");
                              var formData = $("#login_form").serialize();
                              $.ajax({
                                  type: "POST",
                                  url: "login.php",
                                  cache: false,
                                  data: formData,
                                  success: onSuccess,
                                  error: onError
                              });
                              $("#submit").removeAttr("disabled");
                              return false;
                          }
                          else
                              alert("Please fill");
                      }
                  }); 
  
              });
          });
      &lt;/script&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p> 
  </p>