Question

我使用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>

任何帮助将不胜感激。

Answer 1

尝试使用这些网址进行验证 http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js

   <html>

  <head>

 <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
 <title>Gestion des tests</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="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
             <script type="text/javascript" charset="utf-8">
           $(document).on("pageshow", "#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>

提交后未触发表单验证

1 个答案: