我使用 Jquery mobile、Phonegap 和 jquery 验证来验证联系表单。所以当我使用索引页面中的链接从索引页面转到我的联系表单页面时会出现问题。然后当我尝试使用提交按钮验证我的表单时，即使表单无效，我的表单也已提交。但是，当我将我的联系表单设为我的索引页面时，这意味着我不会在页面之间导航，我的表单验证效果很好。这是我的联系页面的代码：
<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>
任何帮助将不胜感激。