JQuery Mobile驗證和AJAX POST表單提交

在下面的代碼片段中，我嘗試使用JQuery Mobile構建登錄頁面。我嘗試使用JQuery驗證blugin驗證輸入。如果驗證正常，我使用AJAX將登錄數據發佈到服務器中的PHP代碼。這是我的代碼應該做的事情，但是，它所做的只是將我重定向到第一頁（語言選擇屏幕）。你能幫我找出我的代碼有什麼問題嗎？謝謝JQuery Mobile驗證和AJAX POST表單提交

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> 
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
    <script src="jquerytest.js"></script> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
</head> 
<body> 
<!-- Select Language Screen --> 
<div data-role="page" data-theme="c" id="select_language_screen"> 
    <div data-role="header"> 
      <h1>Header</h1> 
    </div> 
    <div data-role="content">  
      <ul data-role="listview" data-inset="true" data-dividertheme="b" id="listview_language"> 
       <li data-role="list-divider">Select a langauge</li> 
       <li data-name="en"><a href="#login_screen">English</a></li> 
      </ul>    
    </div> 
    <div data-role="footer" data-position="fixed"> 
    <h4>Footer </h4> 
    </div> 
</div> 
<!-- Login Screen --> 
<div data-role="page" id="login_screen" data-add-back-btn="true"> 
    <div data-role="header"> 
     <h1>Header</h1> 
    </div> 

    <div data-role="content"> 
     <form id="login_form"> 
      <div data-role="fieldcontain"> 
       <label for="mobile_number" id="login_mobile_no_label">Mobile Number</label><br> 
       <input type="text" name="mobile_number" id="login_mobile_no_input" class="required number"/><br><br> 

       <label for="password" id="login_password_label">Password</label><br> 
       <input type="password" name="password" id="login_password_input" class="required" /> 
       <h3 id="notification"></h3> 
       <button data-theme="b" id="submit" type="submit">Submit</button> 
      </div> 
     </form> 
    </div> 
    <div data-role="footer" data-position="fixed"> 
     <h3>Footer</h3> 
    </div> 
    <script> 
     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() <= 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"); 
        } 
       }); 

      }); 
     }); 
    </script> 
</div>

來源

2013-08-06 user1894963

也許您的表單已提交。註釋掉你的ajax調用，看看防止默認是否足夠。 – frequent

jQuery Mobile的不工作的方式。你真的需要閱讀更多關於jQM的知識。基本上沒有任何代碼正在執行，即使有人從另一個頁面進入此頁面，即使更少的代碼也會執行。您需要知道的第一件事是您的表單已經啓用了ajax，除非它具有data-ajax ='false'屬性，並且每個鏈接都是ajax請求，否則每個表單請求都是ajax調用，除非它是外部的，「external」，data-ajax ='true'或目標屬性。

你應該知道的第二件事是，jQM刪除了大部分代碼，並且你的整個$（document）.ready代碼塊不能工作，因爲只要jQM重建DOM，它就會被刪除......如何這確切的作品，我不知道。我遇到了你自己尋找答案的問題，我很新，正在做我的第一個jQM項目，並且因爲我使用它而喜歡它，如果你需要很多其他jQuery插件和自定義腳本，那麼jQM可能不是正確的爲你解決。

所以這是你應該做的事情，你應該寫你的形式，就好像它是沒有JavaScript來的工作，然後添加一個required屬性不僅可以輸入和pattern= 「[0-9]」或者乾脆type="number"到的電話號碼，HTML5的瀏覽器這就是你正在處理智能手機，因爲他們沒有IE等：D會自動驗證，甚至輸出一個很好的錯誤。

有關更多驗證規則，請參閱http://www.pageresource.com/html5/input-validation-tutorial/。

來源

2013-09-28 17:10:10 Neo

JQuery Mobile驗證和AJAX POST表單提交

回答

相關問題