Question

我正在尝试制作一个简单的注册表单并使用jQuery来验证它。没有尝试验证的迹象。我无法弄清楚出了什么问题。提交时，没有回复。即使我只是在空场之间切换，我也没有得到回复。

<html>
<head>
  <link type="text/css" href="general.css" rel="stylesheet"/>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript" >
  (function($,W,D){
      var JQUERY4U = {};
      JQUERY4U.UTIL =
      {
        setupFormValidation: function()
        {
          //form validation rules
          $("#register-form").validate({
            rules: {
              firstname: "required",
              lastname: "required",
              email: {
                required: true,
                email: true
              },
              password: {
                required: true,
                minlength: 5
              },
              agree: "required"
            },
            messages: {
              firstname: "Please enter your firstname",
              lastname: "Please enter your lastname",
              password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
              },
              email: "Please enter a valid email address",
              agree: "Please accept our policy"
            },
            submitHandler: function(form) {
              form.submit();
            }
          });
        }
      }

      //when the dom has loaded setup form validation rules
      $(D).ready(function($) {
        JQUERY4U.UTIL.setupFormValidation();
      });

    })(jQuery, window, document);
  </script>
</head>

<body>
  <div id="container">

    <form action="#" method="post" id="register-form" novalidate="novalidate">
      <h2>User Registration</h2>

      <div id="form-content">
        <fieldset>

          <div class="fieldgroup">
            <label for="firstname">First Name</label>
            <input type="text" name="firstname"/>
          </div>

          <div class="fieldgroup">
            <label for="lastname">Last Name</label>
            <input type="text" name="lastname"/>
          </div>

          <div class="fieldgroup">
            <label for="email">Email</label>
            <input type="text" name="email"/>
          </div>

          <div class="fieldgroup">
            <label for="password">Password</label>
            <input type="password" name="password"/>
          </div>

          <div class="fieldgroup">
            <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
            <input type="submit" value="Register" class="submit"/>
          </div>

        </fieldset>
      </div>

      <div class="fieldgroup">
        <p>Already registered? <a href="/login">Sign in</a>.</p>
      </div>
    </form>
  </div>

</body>
</html>

JSFiddle：http://jsfiddle.net/rjH7U/

Answer 1

问题是您的脚本标记顺序错误。 jQuery验证框架需要jQuery才能工作。因此，您必须将jQuery脚本标记移动到jQuery验证脚本标记之上。它们按照您输入的顺序加载。

此外，包含代码的最终脚本标记应移动到放置表单UI的html下方。同样，这是同一个问题。在将html加载到DOM之前，正在调用您的代码。这就是为什么它不起作用。请参阅此JSBin以获取一个工作示例：

http://jsbin.com/yeseraku/1/edit?html,output

工作代码：

<html>
<head>  

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

</head>
<body>

<div id="container">

    <form action="#" method="post" id="register-form" novalidate="novalidate">

        <h2>User Registration</h2>

        <div id="form-content">
            <fieldset>

                <div class="fieldgroup">
                    <label for="firstname">First Name</label>
                    <input type="text" name="firstname"/>
                </div>

                <div class="fieldgroup">
                    <label for="lastname">Last Name</label>
                    <input type="text" name="lastname"/>
                </div>

                <div class="fieldgroup">
                    <label for="email">Email</label>
                    <input type="text" name="email"/>
                </div>

                <div class="fieldgroup">
                    <label for="password">Password</label>
                    <input type="password" name="password"/>
                </div>

                <div class="fieldgroup">
                    <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>
                    <input type="submit" value="Register" class="submit"/>
                </div>

            </fieldset>
        </div>

            <div class="fieldgroup">
                <p>Already registered? <a href="/login">Sign in</a>.</p>
            </div>
    </form>
</div>

<script type="text/javascript">
(function($,W,D){
        var JQUERY4U = {};

        JQUERY4U.UTIL =
        {
            setupFormValidation: function()
            {
                //form validation rules
                $("#register-form").validate({
                    rules: {
                        firstname: "required",
                        lastname: "required",
                        email: {
                            required: true,
                            email: true
                        },
                        password: {
                            required: true,
                            minlength: 5
                        },
                        agree: "required"
                    },
                    messages: {
                        firstname: "Please enter your firstname",
                        lastname: "Please enter your lastname",
                        password: {
                            required: "Please provide a password",
                            minlength: "Your password must be at least 5 characters long"
                        },
                        email: "Please enter a valid email address",
                        agree: "Please accept our policy"
                    },
                    submitHandler: function(form) {
                        form.submit();
                    }
                });
            }
        }

        //when the dom has loaded setup form validation rules
        $(D).ready(function($) {
            JQUERY4U.UTIL.setupFormValidation();
        });

    })(jQuery, window, document);
</script>

</body>
</html>

没有jQuery验证脚本的响应

1 个答案: