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

【问题标题】：form validation with jquery-form-validator使用 jquery-form-validator 进行表单验证
【发布时间】：2014-02-01 12:20:26
【问题描述】：

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>

这里是我放在头标签中的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>

怎么了？

【问题讨论】：

您是否正确导入了 jQuery 库和验证插件？
确保我下载了插件并将所有插件文件放在服务器文件夹中...jquery 已正确导入，因为我的幻灯片工作正常...

标签： jquery forms validation

【解决方案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";
        }

});

【讨论】：

我尝试过，但在这种情况下也不起作用...我还尝试将脚本放在表单结束标记之后的正文部分:(
只有一个警告：“event.returnValue 已被弃用。请改用标准 event.preventDefault()”（在 jquery 1.9.0.js 第 3307 行）
等待一个错误：Uncaught SyntaxError: Unexpected token ; ...我尝试修复
我是这样解决的..我进入插件官方页面，我进入演示部分，我复制并粘贴了演示表单的脚本并为我的表单进行了修改......现在它可以工作了。 ..有一个语法错误:)

【解决方案2】：

试试这个：

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

【讨论】：