1

我在我的网站上有这个 jsFiddle中的代码。那里的代码正是在我的网站上实现的，除了我的网站<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>在标记之后也有<meta>（因为 jsFiddle 自动调用它；这存在于下面的代码中）。该代码在 jsFiddle 上按预期工作，但在我的网站上，除非刷新页面或在第一次提交后单击后退按钮，否则验证不起作用。表单重定向到logins.php脚本（现在为空白），按下后退按钮后验证工作正常。我data-ajax="false"在表格上。我该怎么做才能使表单验证始终有效，而不仅仅是在刷新或返回之后？

这是代码：

<!DOCTYPE html>
<html>
<head> 
    <title>Welcome</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#loginForm").validate();
        });
    </script>
    <style type="text/css">
        label.error {
            font-weight:bold;
            color:red;
        }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

</head> 
<body>
    <div data-role="page" id="login">
        <div data-role="header"><h1>Log In</h1></div>
        <div data-role="content">You can use the fields below to log in to your account.<br>
        <br>
        <form action="logins.php" method="POST" id="loginForm" name="loginForm" data-ajax="false">
            <label for="email" class="ui-hidden-accessible">Email Address:</label>
            <input type="text" id="email" name="email" value="" class="required email" minlength="5" placeholder="Email Address" />
            <label for="pass" class="ui-hidden-accessible">Password:</label>
            <input type="password" id="pass" name="pass" value="" class="required" minlength="5" placeholder="Password" />
            <input class="submit" data-role="submit" type="submit" value="Submit" />
        </form><br>
        <br>
        <a href="index.php" data-role="button" data-transition="slide" data-direction="reverse">Return to home page</a>
        </div>
        <div data-role="footer"><h4>&copy; Me 2013</h4></div>
    </div>
</body>
</html>
4

1 回答 1

2

http://jquerymobile.com/demos/1.2.0/docs/api/events.html

$(document).ready()不应与 jQuery Mobile 一起使用。改为使用$(document).bind("pageinit")。

此外，jQuery Mobile 1.2 支持 jQuery Core 1.8.2（不是 1.8.3）。

于 2013-01-09T19:01:21.350 回答