jQuery Mobile，表单提交时的页面更改

Posted 2023-05-09

【中文标题】jQuery Mobile，表单提交时的页面更改

【英文标题】：jQuery Mobile, page change on form submit

【发布时间】：2016-07-05 17:59:24

【问题描述】：

我正在使用 jQuery mobile 并且想要验证表单。 我已经为表单指定了一个 paymentDetailForm 类。

<form method="post" action="demo.java" class="paymentDetailForm">

表单中的提交按钮的 id 为paymentConfirm 然后在javascript中，我使用这个代码：

$("#paymentConfrim").click(function() 
 $( ".paymentDetailForm" ).submit(function( event ) 
   if(!validatePaymentDetailForm()) // if false comes from validation
     return false;
   
   else
     $(':mobile-pagecontainer').pagecontainer("change", "#successPage", );
     return true;
    
 );

);

这里的validatePaymentDetailForm 是我编写的用于验证表单字段的自定义验证函数。如果表单没有验证，则返回 false，否则返回 true。

成功提交表单后，我正在尝试将用户重定向到成功消息页面。子页面的id是successPage，但是上面显示的代码不起作用。

$(':mobile-pagecontainer').pagecontainer("change", "#successPage", );

控制台显示此错误，同时执行此行： Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: mobile-pagecontainer

知道我做错了什么吗？

【参考方案1】：

我使用的是旧版本的 jQuery Mobile 版本 1.2。显然 jQuery 页面容器小部件是在 jQuery Mobile 1.4 版中引入的。 我无法更改 jQuery 移动版本，所以我使用了 changePage() 函数。

这是我用来进行页面转换的代码：

$("#paymentConfrim").click(function() 
  $( ".paymentDetailForm" ).submit(function( event ) 
  if(!validatePaymentDetailForm()) // if false comes from validation
     return false;
  
  else
      $.mobile.changePage( "#submissionConfirmation",  );
     return true;
   
);