Question

在我目前的项目中，我想将现有的Web应用程序移植到jQuery Mobile，而且在HTML表单方面遇到了问题：

当我从false标记中的onsubmit JavaScript属性（例如onsubmit="alert('onsubmit'); return false;"）返回<form>时，我希望禁止表单提交（因为我的验证失败）。但jQuery Mobile并没有压制表单提交。看看下面的示例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <title>Onsubmit Test Page</title>
        <link rel="shortcut icon" href="images/favicon.png" />
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>

    </head>
    <body>

        <div data-role="page" id="FeedsListPage"> 
            <div data-role="header" data-position="fixed">
                <h3>Onsubmit Test Page</h3>
            </div> 
            <div data-role="content">
                <form id="form1" onsubmit="alert('onsubmit'); return false;">
                        <label for="email">E-mail:</label>
                        <input type="email" name="email" required="required" id="email" placeholder="e.g.: john@doe.com">
                        <label for="password">Password:</label>
                        <input type="password" name="password" required="required" id="password" placeholder="">
                        <input type="submit" value="Login">
                </form>
            </div>
        </div> 
    </body>
</html>

当我提交表单时，警报窗口会正确弹出，但页面将被重新加载（通过电子邮件和密码查询参数扩展URL）。当我删除jQuery Mobile样式表和脚本引用时，浏览器正在正确处理代码：返回false时不提交，返回true时提交。

这是jQuery Mobile中的错误吗？或者这个功能根本不受支持？或者我做错了什么？谢谢你的帮助！

BTW：是的，我知道我可以绑定到这样的提交事件：

jq('#form1').submit(function() {
    alert('onsubmit');
    return false; // disable default submit handling
});

这个工作正常，但我不想这样做，因为我不想改变现有的大部分代码。此外，我们的Web应用程序正在动态更改表单，我必须在每次更改后重新绑定。顺便说一下：delegate（）似乎也不起作用：与onsubmit属性相同的问题。

顺便说一句：是的，我知道我可以在data-ajax="false"元素中使用<form>，但我不希望阻止使用Ajax自动处理表单提交。实际上我确实希望jQM处理表单提交（包括漂亮的更改页面动画），当我从onsubmit代码返回false时它应该不提交表单。而且我不希望{on}提交代码changepage()。那真的应该只进行验证 - 返回真或假......任何想法我怎么能达到那个目标？为什么jQM不尊重onsubmit代码的返回值？

jQuery Mobile不会正确地抑制表单提交

0 个答案: