1. 首頁
  2. 問答
  3. phonegap android登錄表格

phonegap android登錄表格

2013-03-26 38 views
0

* *爲什麼我在移動端沒有得到驗證我沒有得到字段的驗證，甚至在瀏覽器中得到應用驗證，但未能進入移動設備。任何人都可以指出我做錯了什麼？phonegap android登錄表格

<!DOCTYPE html> 
<html> 
    <head> 
    <title>first example</title> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    <script type="text/javascript" charset="utf-8" src="js/lib/cordova-2.0.0.js"></script> 
    <script type="text/javascript" src="js/lib/jquery.js"></script> 
    <script src="js/lib/jquery.mobile-1.1.1.js"></script> 
    <script type="text/javascript" src="js/lib/jqm.page.params.js"></script> 
<script type="text/javascript" src="js/lib/jquery.validate.js"></script> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script type="text/javascript" src ="js/lib/jquery.validate.min.js"></script> 
    <script type="text/javascript" src="js/lib/additional-methods.min.js"> 
    <script type="text/javascript" charset="utf-8" src="js/lib/helloworldjs/alldatabse.js"></script> 
<script type="text/javascript"> 
$(document).ready(
function() 
    { $("#formregistration").validate(
    { rules:{ 
      usernameforreg: 
      { 
       required:true, 
       minlength:4, 
       maxlength:10 

      }, 
      useremail: 
      { 
       required:true, 
       email:true 

      }, 
     passwordforreg: 
       { 
       required:true, 
       minlength:8 
       }, 
     retypepassword: 
      { 
      required:true, 
      equalTo:"#passwordforreg" 
      } 
      }, 
     messages:{ 
      usernameforreg: 
      { 
       required:"pls enter name", 
      minlength:$.format("Keep typing, at least {0} characters required!"), 
      maxlength:$.format("Maximum {0} characters allowed!") 

      }, 
     useremail: 
      { 
      required:"pls enter email id", 
      email:"enter valid email id" 
      }, 
     passwordforreg: 
       { 
       required:"pls enter password", 
       minlength:$.format("at least {0} characters required!") 
       },  
     retypepassword: 
      { 
      required:"pls confirm password", 
      equalTo:"both passwords must match" 
      } 

      } 

    }); 
    $("#formlogin").validate(
     {rules: 
      {username: 
       { 
        required:true, 
        minlength:4 
       }, 
      password: 
       { 
       required:true, 
       minlength:8 
       } 
      }, 
     messages: 
      {username: 
       { 
       required:"pls enter user name", 
       minlength:"pls enter atleast {0} characters" 
       }, 
      password: 
       { 
       required:"pls enter password", 
       minlength:"password should be atleast {0} characters" 
       } 


      } 
     }); 




    }); 

</script> 
</head> 
<body> 


<div data-role="page" id="login"> 
<form name="login" id="formlogin" method="get" action="" accept-charset = "utf-8"> 

<div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange; width:100%; margin:0 auto;"> 

    <label for="username">USER NAME:</label> 
    <input type="text" name="username" id= "usrname" placeholder="ali" size="10" style="color:#ff9900;" required></input> </br> 

    <label for = "password">PASSWORD:</label> 
    <input type = "password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" required title="User name is required"></input></br> 

    <a href="#" id ="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="doLogin1();" style= "width:120px;" "height:60px;" "float:right;">LOGIN</a> 
    <a href="#" id ="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" onclick="showRegisterForm();" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a> 

</div> 
</form> 
</div> 


<div data-role="page" id="registration"> 
<form name="" id="formregistration" method="get" action=""> 

    <div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;"> 

    <label for="usernameforreg">USER NAME:</label> 
    <input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" required></input></br> 

    <label for="emailid">EMAIL ID:</label> 
    <input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" required></input></br> 

    <label for="passwordforreg">PASSWORD:</label> 
    <input type="password" name="passwordforreg" id="passwordforreg" palceholder="pls enter your password" style="color:#ff9900;"></input></br> 

    <label for="retypepassword">RETYPE PASSWORD:</label> 
    <input type="password" name="retypepassword" id="retypepasswordforreg" palceholder="retype password" style="color:#ff9900;" classrequired></input></br> 

    <a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" onclick="registrationProcess();" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a> 

    </div> 
</form> 

</div> 
    </body> 
    </html>

來源

2013-03-26 Erum

回答

2

這將是我們比較容易，在這裏如此，如果所有外來&多餘的代碼剝離出來，你可以發佈你的例子。例如，我們不需要看到所有的內聯樣式。

無論如何，我發現了一堆的問題......

1）你是不是正確，包括腳本。你首先需要（和一次）jQuery以及其他一切。仔細檢查你的語法;您錯過了additional-methods.js的關閉</script>標記。您也不需要同時包含縮小和未縮小版本的腳本...只需選擇一個。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="js/lib/jquery.mobile-1.1.1.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
<script type="text/javascript" src="js/lib/cordova-2.0.0.js"></script> 
<script type="text/javascript" src="js/lib/jqm.page.params.js"></script> 
<script type="text/javascript" src="js/lib/jquery.validate.min.js"></script> 
<script type="text/javascript" src="js/lib/additional-methods.min.js"></script> 
<script type="text/javascript" src="js/lib/helloworldjs/alldatabse.js"></script>

2）在您的形式，你有一些無效的HTML。輸入和換行都是 「自閉」 ......

不這樣的：<input></input>和</br>

是的，就像這樣：<input />和<br />

3）你正在使用內聯JavaScript來使用內聯onclick事件處理程序調用其他函數。既然你使用jQuery，你可能會充分利用它。刪除內聯JavaScript並執行類似的操作，這會將您的錨標記有效地轉換爲提交按鈕。

$('#loginbtn').on('click', function (e) { 
    e.preventDefault(); 
    $("#formlogin").submit(); 
});

4）內部表單HTML，你可以改變required到required="required"這是更好的語法。順便說一句，既然你已經在.validate()內聲明required，你不需要在HTML中再次指定這些規則......做一個或另一個...不需要兩者。我從HTML中刪除了這些。

5）既然你已經中.validate()指定所有的消息，我刪除了從輸入title屬性。

6）你在幾個地方拼錯placeholder屬性爲palceholder。

隨着一切（我認爲）固定，jQuery驗證似乎工作：

DEMO：http://jsfiddle.net/5T3tq/1/

現在，您可以慢慢加回您的​​其他插件和功能

jQuery：

$(document).ready(function() { 

    $('#loginbtn').on('click', function (e) { 
     e.preventDefault(); 
     $("#formlogin").submit(); 
    }); 

    $('#submitbtn').on('click', function (e) { 
     e.preventDefault(); 
     $("#formregistration").submit(); 
    }); 

    $('#signupbtn').on('click', function (e) { 
     e.preventDefault(); 
     // show register form 
     $('#registration').show(); 
    }); 

    $("#formregistration").validate({ 
     rules: { 
      usernameforreg: { 
       required: true, 
       minlength: 4, 
       maxlength: 10 

      }, 
      useremail: { 
       required: true, 
       email: true 

      }, 
      passwordforreg: { 
       required: true, 
       minlength: 8 
      }, 
      retypepassword: { 
       required: true, 
       equalTo: "#passwordforreg" 
      } 
     }, 
     messages: { 
      usernameforreg: { 
       required: "pls enter name", 
       minlength: $.format("Keep typing, at least {0} characters required!"), 
       maxlength: $.format("Maximum {0} characters allowed!") 

      }, 
      useremail: { 
       required: "pls enter email id", 
       email: "enter valid email id" 
      }, 
      passwordforreg: { 
       required: "pls enter password", 
       minlength: $.format("at least {0} characters required!") 
      }, 
      retypepassword: { 
       required: "pls confirm password", 
       equalTo: "both passwords must match" 
      } 
     } 
    }); 

    $("#formlogin").validate({ 
     rules: { 
      username: { 
       required: true, 
       minlength: 4 
      }, 
      password: { 
       required: true, 
       minlength: 8 
      } 
     }, 
     messages: { 
      username: { 
       required: "pls enter user name", 
       minlength: "pls enter atleast {0} characters" 
      }, 
      password: { 
       required: "pls enter password", 
       minlength: "password should be atleast {0} characters" 
      } 
     } 
    }); 

});

HTML：

<div data-role="page" id="login"> 
    <form name="login" id="formlogin" method="get" action="" accept-charset="utf-8"> 
     <div style="background-image: url(css/lib/images/purty_wood.png); background-color:#D3BEAC; height:50%; margin-top:200px; border:6px groove orange; width:100%; margin:0 auto;"> 
      <label for="username">USER NAME:</label> 
      <input type="text" name="username" id="usrname" placeholder="ali" size="10" style="color:#ff9900;" /> 
      <br /> 
      <label for="password">PASSWORD:</label> 
      <input type="password" name="password" id="usrpswd" placeholder="please enter your password" style="color:#ff9900;" /> 
      <br /> <a href="#" id="loginbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">LOGIN</a> 
<a href="#" id="signupbtn" data-role="button" data-theme="b" data-mini="true" data-inline="true" style="width:120px;" "height:60px;" "float:right;">SIGN UP</a> 
     </div> 
    </form> 
</div> 
<div data-role="page" id="registration" style="display: none;"> 
    <form name="" id="formregistration" method="get" action=""> 
     <div style="background-image:url('/helloworld/assets/www/css/lib/images/purty_wood.png'); height:30%; border:3px solid-black; position:absolute; top:25%; left:25%; right:25%; width:350px;"> 
      <label for="usernameforreg">USER NAME:</label> 
      <input type="text" name="usernameforreg" id="usrnameforreg" placeholder="pls enter your name" style="color:#ff9900;" /> 
      <br /> 
      <label for="emailid">EMAIL ID:</label> 
      <input type="email" name="useremail" id="useremail" placeholder="please enter your email id" style="color:#ff9900;" /> 
      <br /> 
      <label for="passwordforreg">PASSWORD:</label> 
      <input type="password" name="passwordforreg" id="passwordforreg" placeholder="pls enter your password" style="color:#ff9900;" /> 
      <br /> 
      <label for="retypepassword">RETYPE PASSWORD:</label> 
      <input type="password" name="retypepassword" id="retypepasswordforreg" placeholder="retype password" style="color:#ff9900;" /> 
      <br/> <a href="#" id="submitbtn" data-role="button" data-theme="b" data-mini="true" style="width:120px;" "height:60px;" "float:center;">SUBMIT</a> 
     </div> 
    </form> 
</div>

來源

2013-03-26 16:25:15 Sparky

+0

非常感謝您的合作，我會盡我所能來糾正我的代碼，將檢查結果和請讓我知道哪些網站或書，我可以按照對於手機的差距，作爲即時通訊新的發展和麪臨困難jQuery和JS – Erum 2013-03-26 17:22:56

+0

@ErumHannan，我不知道任何書籍，但我在[jQuery網站]（http://jquery.com/瞭解jQuery ），在這裏閱讀關於它的內容，並在jsFiddle中試用我自己的代碼。這只是需要時間。 – Sparky 2013-03-26 17:32:43

相關問題

 相關問題