Question

有人可以通过此表单验证查看我的错误吗？我使用的是我在网上找到的一个例子，它对我不起作用。

我希望在将输入字段传递给服务器端脚本之前使用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>

以下是我从website somewhere获得的原始代码的代码，并且它有效。但我似乎无法在我的代码中使用该示例。

<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，现在正在运作。还有一个问题是，是否可以更改默认错误消息而不是 '此字段是必需的' ？

由于

Answer 1

从验证规则，网址等中删除不存在的字段。我删除了这些字段及其工作原理。工作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>

Answer 2

检查语法 - 这里有逗号：

    rules: { 

      username: "required", 

      firstname: "required",  

      email: {// compound rule 

      required: true, 

      passwd: true, 

      email: true**,** 

    },

删除它，看看你是如何继续的。

Answer 3

您收到JavaScript错误。跑这个小提琴，看看http://jsfiddle.net/nickyt/Sjvh2。看起来验证插件在第493行抛出错误。开始调试;）

Answer 4

您指向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>

更好的是，指向文件的本地副本。

另外，请使用firebug检查您是否收到任何JS错误。

编辑：仅此更改无法解决您的问题，但您真的不应该从dev.jquery.com热链接脚本。请参阅related answer和Hotlinking to be disabled on January 31, 2011。

使用JQuery验证HTML表单

4 个答案: