2011-08-22 61 views
2

有人可以看到我的錯誤表單驗證?我正在使用我在網上找到的一個例子,它不適合我。使用JQuery驗證HTML表單

我想驗證與jQuery的輸入字段,然後將其傳遞到服務器端腳本。它應該在用戶缺少輸入的字段旁邊打印錯誤消息。

下面的代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Register</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"> 
<link rel="stylesheet" type="text/css" href="style1.css" /> 
<link rel="stylesheet" type="text/css" href="forms.css" /> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#registerform").validate({ 
     rules: { 
      username: "required", 
      firstname: "required", 
      email: {// compound rule 
      required: true, 
      passwd: true, 
      email: true, 
     }, 
     username:{ 
      username: true 
     }, 
     url: { 
      url: true 
     }, 
     comment: { 
      required: true 
     } 
     }, 
     messages: { 
      comment: "Please enter a comment." 
     } 
     }); 
    }); 
    </script> 

<style type="text/css"> 

label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 
.submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 
</head> 

<body> 

Please register below 
<p /> 
       <form action=" " id="registerform" method="POST"> 


     <table cellspacing="9"> 
     <tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr> 
     <tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr> 
     <tr><td><b>Surname:</b> </td><td><input type="text" name="lastname" size="30"/></td></tr> 
     <tr><td><b>Email : </b> </td><td><input type="text" name="email" size="30"/></td></td></tr> 
     <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr> 

     <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr> 
     <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr> 
     <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr> 
     <tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr> 
     <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr> 

    </table> 

    <p /> 
       <input class="submit" type="submit" value="Sign Up!" /> 
       <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')"> 
       </form> 


</body> 

下面的代碼原有的代碼,我從網站得到的地方,它的作品。但我似乎無法在我的代碼中使用該示例。

<html> 
    <head> 
    <title>Simple Form Validation</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#form2").validate({ 
     rules: { 
      name: "required",// simple rule, converted to {required:true} 
      email: {// compound rule 
      required: true, 
      email: true 
     }, 
     url: { 
      url: true 
     }, 
     comment: { 
      required: true 
     } 
     }, 
     messages: { 
      comment: "Please enter a comment." 
     } 
     }); 
    }); 
    </script> 

    </head> 


    <body> 
    <form id="form2" method="post" action=""><br /> 
     Name * <input type="text" name="name" /> <br /> 
     E-Mail *<input type="text" name="email" /> <br /> 

     URL <input type="text" name="url" /> <br /> 
     Your comment * <textarea name="comment" ></textarea> <br /> 
     <input class="submit" type="submit" value="Submit"> 
    </form> 
    </body> 
</html> 

更新:感謝@Usman它現在的工作。還有一個問題,是否可以更改默認錯誤消息而不是'此字段是必填'

謝謝

+0

這將是一個很多其他人更容易幫助你,如果你解釋它是如何不是爲你工作。 –

+0

對不起,這不是驗證。它只是提交空表格。 – Julie

+0

你有錯誤或......? –

回答

2

從驗證規則,網址等中刪除不存在的字段我已經刪除了這些和它的工作。工作http://jsfiddle.net/xyRRU/,檢查下面的代碼:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Register</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5"> 
<link rel="stylesheet" type="text/css" href="style1.css" /> 
<link rel="stylesheet" type="text/css" href="forms.css" /> 

<script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function() { 
     $("#registerform").validate({ 
     messages: { 

      firstname: "Please enter your firstname", 
      username: { 
       required: "Please enter a username", 
       minlength: "Your username must consist of at least 2 characters" 
      }, 

      email: "Please enter a valid email address" 

     }, 
     rules: { 
      username: "required", 
      firstname: "required", 
      email: {// compound rule 
      required: true, 
      passwd: true, 
      email: true, 
     }, 
     }, 

     }); 
    }); 
    </script> 

<style type="text/css"> 

label { width: 10em; float: left; } 
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; } 
p { clear: both; } 
.submit { margin-left: 12em; } 
em { font-weight: bold; padding-right: 1em; vertical-align: top; } 
</style> 
</head> 

<body> 

Please register below 
<p /> 
       <form action=" " id="registerform" method="POST"> 


     <table cellspacing="9"> 
     <tr><td><b>Username:</b></td><td><input type="text" name="username" size="30"></td></tr> 
     <tr><td><b>First name:</b></td><td><input type="text" name="firstname" size="30"/></td></tr> 
     <tr><td><b>Surname:</b> </td><td><input type="text" name="lastname" size="30"/></td></tr> 
     <tr><td><b>Email : </b> </td><td><input type="text" name="email" size="30"/></td></td></tr> 
     <tr><td><b>Password :</b> </td><td><input type="password" name="passwd" size="30"/></td></tr> 

     <tr><td><b>Telephpone:</b></td><td><input type="text" name="telephone" size="30"/></td></td></tr> 
     <tr><td><b>House No:</b></td><td><input type="text" name="ad1" size="30"/></td></td></tr> 
     <tr><td><b>Street Name:</b></td><td><input type="text" name="street" size="30"/></td></tr> 
     <tr><td><b>Town/ City:</b></td><td><input type="text" name="town" size="30"/></td></tr> 
     <tr><td><b>Post code:</b></td><td><input type="text" name="pcode" size="30"/></td></tr> 

    </table> 

    <p /> 
       <input class="submit" type="submit" value="Sign Up!" /> 
       <input type="reset" value ="Clear Form" onClick="return confirm('Are you sure you want to reset the form?')"> 
       </form> 


</body> 
+0

非常感謝,它像魔術一樣運作。你是一個明星:-) – Julie

+0

有什麼辦法可以指定自己的錯誤信息,而不是默認的「\t此字段是必需的」? – Julie

+0

我已編輯顯示如何添加自己的消息的答案,謝謝。 – Usman

1

檢查你的語法 - 你必須留在了這裏一個逗號:

rules: { 

     username: "required", 

     firstname: "required", 

     email: {// compound rule 

     required: true, 

     passwd: true, 

     email: true**,** 

    }, 

刪除,看你怎麼得到。

0

您與jquery.validate.js的鏈接正在返回403 Forbidden error,這意味着您並未實際導入該插件。

嘗試此鏈接來代替:http://view.jquery.com/trunk/plugins/validate/jquery.validate.js

<script type="text/javascript" src="http://view.jquery.com/trunk/plugins/validate/jquery.validate.js"></script> 

更妙的是,指向該文件的本地副本。

此外,請檢查你沒有得到任何JS錯誤使用firebug


編輯:這種變化本身不會解決你的問題,但你真的不應該被盜鏈從dev.jquery.com腳本。見related answerHotlinking to be disabled on January 31, 2011

+0

嗯,這似乎沒有幫助:(謝謝雖然。 – Julie

+0

這本身不會解決你的問題,因爲你有你的JS錯誤。然而,你真的應該改變你的鏈接,因爲[dev.jquery.com不允許盜鏈](http://stackoverflow.com/questions/5947093/jquery-autocomplete-is-not-a-function/5947177#5947177)。你最好自己託管。 –