在非Ajax表单提交中显示jQuery Mobile中的加载消息

Question

我在jQuery Mobile中提交了表单标签上的data-ajax="false"表单以及enctype="multipart/form-data"，这样我就可以利用iOS 6中的文件上载功能。必须禁用默认的Ajax表单提交为了实际传递附加文件。

我想显示使用这种默认的jQuery Mobile的加载消息：

$.mobile.loading('show'); 

为defined in the docs。

我的表单验证使用此代码：

$(document).bind("pageinit", function(event, data) { 
    $("#contact-form").validate({ 
     // Custom validation messages 
     messages: { contact_name: "Please enter your full name.", contact_phone: "Please enter a valid phone number.", contact_zip: "Please enter your shipping zip code."}, 
     errorElement: "p", 
     submitHandler: function(form){ 

      //Get the data from the form fields and format correctly 
      var name = $("#contact-form #contact_name").val(); 
      var email= $("#contact-form #contact_email").val(); 
      var phone= $("#contact-form #contact_phone").val(); 
      var zip= $("#contact-form #contact_zip").val(); 
      var message = $("#contact-form #contact_message").val(); 

      document.forms["contact-form"].submit(); 
     } 
    }); 
}); 

如何（在jQuery Mobile的），我可以显示默认加载微调当用户提交表单（通过触摸/点击与type="submit"提交按钮）？

Answer 1

我想你可能会想尝试这样的事：

$(document).bind("pageinit", function(event, data) { 

    $("#your_submit_button").click(function() { 

     // When the button is clicked, show loading message 
     $.mobile.loading('show'); 

     // Validate the form 
     $("#contact-form").validate({ 
      // Custom validation messages 
      messages: { contact_name: "Please enter your full name.", contact_phone: "Please enter a valid phone number.", contact_zip: "Please enter your shipping zip code."}, 
      errorElement: "p", 
      submitHandler: function(form){ 

      //Get the data from the form fields and format correctly 
      var name = $("#contact-form #contact_name").val(); 
      var email= $("#contact-form #contact_email").val(); 
      var phone= $("#contact-form #contact_phone").val(); 
      var zip= $("#contact-form #contact_zip").val(); 
      var message = $("#contact-form #contact_message").val(); 

      document.forms["contact-form"].submit(); 

      // Hide the loading message 
      $.mobile.loading('hide'); 

     } 
    }); 
}); 

希望这有助于