私のサイトのこの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>© Me 2013</h4></div>
</div>
</body>
</html>