Jquery mobile、Phonegap、および jquery validation を使用して連絡先フォームを検証しています。そのため、インデックスページのリンクを使用してインデックスページからコンタクトフォームページに移動すると問題が発生します。次に、送信ボタンを使用してフォームを検証しようとすると、フォームが有効でない場合でもフォームが送信されます。しかし、コンタクトフォームをインデックスページにすると、フォームの検証がうまく機能します。ここに私の連絡先ページのコードがあります:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageinit", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
<a href="index.html">index</a>
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>
ここに私のインデックスページがあります：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
//*********************************************************
// Wait for Cordova to Load
//*********************************************************
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header">
<h1>plane</h1>
</div>
<div data-role="content">
some content
<a href="contact.html" data-role="button">begin</a>
</div>
</div>
</body>
</html>
どんな助けでも大歓迎です。