使用 jquery-form-validator 进行表单验证

Question

jquery-form-validator插件不验证。我使用的是jQuery 1.9.0（该插件使用该版本进行了测试）。

.html：

 <form id="Form" method="get" action="">
        <div class="box-1">
          <label for="name">CONTACT NAME*<br /></label>
          <label for="email">CONTACT EMAIL ADDRESS*<br /></label>
        <label for="tel">CONTACT PHONE NUMBER</label>
      </div>
      <div class="box-2">
        <input id="name" name="name" type="text" /><br />
        <input id="email" name="email" type="text" /><br />
        <input id="tel" name="tel" type="tel"/><br /><br />
        <input class="submit" type="submit" value="SEND" />
     </div>
     </form>

这里是我放在 head 标签中的 JavaScript（当然还有脚本 src 到插件和 jquery）：

JavaScript：

   <script>
    $.validator.setDefaults({
              submitHandler: function() { alert("submitted!"); }
            });
            $().ready(function() {
                $("#Form").validate({
                    rules: {
                        name: "required",
                        email: "required"
                    },
                    messages: {
                        name: "Please enter your name",
                        email: "Please enter your email";
                    }
            }); 
    </script>

怎么了？

Answer 1

更改自：

$()

自

$(document)

您还需要更改rules：

rules: {
    name: { required: true },
    email: { required: true }
}

您还需要将所有代码包装在 DOM 中。最终代码应如下所示：

$(document).ready(function() {
    $.validator.setDefaults({
        submitHandler: function() { alert("submitted!"); }
    });
    $("#Form").validate({
        rules: {
             name: { required: true },
             email: { required: true }
        },
        messages: {
             name: "Please enter your name",
             email: "Please enter your email";
        }
});

Answer 2

试试这个：

rules: {
    name: { required: true },
    email: { required: true }
},