无法使用 JQuery 验证联系表单

Question

这是我第一次尝试建立网站。我需要使用 JQuery 验证我的联系表单（无插件）。我尝试遵循一些教程，但我尝试的没有任何效果。我究竟做错了什么？ :(

http://jsfiddle.net/LnQ9C/

$(document).ready(function(){
    $("#contactform").validate({
        rule: {
            name: "required",
            email: {
                required: "true",
                email: true
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email address"
            },
            submitHandler: function(form){
                form.submit();
            }
        }
    });
});

另外，我怎样才能让表单通过电子邮件向我发送详细信息？

Answer 1

你不需要 jQuery。甚至是 JavaScript。

<input type="text" name="name" required title="Please enter your name" />
<input type="email" name="email" required title="Please enter a valid email address" />

完成。这就是 HTML5 的魔力。

Answer 2

引用 OP：

“我需要使用 jQuery 验证我的联系表单（无插件）。我尝试按照一些教程进行操作，但没有任何效果。我做错了什么？”

$(document).ready(function(){
    $("#contactform").validate({
        rule: {
            name: "required",
            email: {
                required: "true",
                email: true
            },
            messages: {
                name: "Please enter your name",
                email: "Please enter a valid email address"
            },
            submitHandler: function(form){
                form.submit();
            }
        }
    });
});

这里有很多语法问题，但最重要的是，您尝试制作的代码依赖于插件！ 在此上下文中使用的 .validate() 方法是 @ 的一部分987654321@，其中you've not included in the jsFiddle。

顺便说一句，在不使用插件的情况下，jQuery 中没有 .validate() 方法这样的东西。

---

这里有问题...

1) 您必须包含 jQuery Validate 插件或 .validate() 方法对 jQuery 没有任何意义。

2) 您的提交按钮必须是 type="submit"，并且不需要任何内联 JavaScript onclick 处理程序。改变这个...

<input type="button" onclick="validate_form();" />

进入这个...

<input type="submit" />

3) rules 选项拼写为 rules 而不是 rule。

4) messages 和 submitHandler 选项不属于 rules。他们是兄弟姐妹或rules，而不是孩子。

5) 对于email 下的required 规则，true 值不属于引号。

6) 您不需要包含 submitHandler 回调，只要它只包含 form.submit()，因为这是默认行为。

$(document).ready(function () {
    $("#contactform").validate({  // <-- requires jQuery Validate plugin
        rules: {                  // <-- spelled "rules" with an "s"
            name: "required",
            email: {
                required: true,   // <-- true does not need quotation marks
                email: true
            }
        },
        messages: {               // <-- this option is a sibling of 'rules'
            name: "Please enter your name",
            email: "Please enter a valid email address"
        }
    });
});

工作演示：http://jsfiddle.net/g6P7c/

---

See my other answer 了解如何在没有插件的情况下进行 jQuery 验证。

Answer 3

第一次替换：

<input type="button" onclick="validate_form();" />

到：

<input type="submit"/>

您不需要使用按钮并听“onclick”，并为 jquery.validate 设置正确的选项：

$("#contactform").validate({
    rules: { // "rules" not "rule"
     name: "required",
     email: {
      required: true, // boolean type, "true" is a string
      email: true
     }
    }, // message is new property
    messages: {
      name: "Please enter your name",
      email: "Please enter a valid email address"
    },
    submitHandler: function(form){
      form.submit();
    }
 }

示例：http://jsfiddle.net/LnQ9C/2/

Answer 4

引用 OP：

“我需要使用 jQuery 验证我的联系表单（无插件）。我尝试按照一些教程进行操作，但没有任何效果。我做错了什么？”

See my other answer 详细解释原始代码中的语法问题。 您尝试编写的代码取决于插件！ 在此上下文中使用的.validate() 方法是the jQuery Validate plugin 的一部分，you've not included in the jsFiddle。

顺便说一句，不使用插件的 jQuery 中没有 .validate() 方法之类的东西。

但是，没有插件，也没有为你做所有的功课，这里有一个非常粗略的演示，你需要做的事情。它只验证一个字段为required，并且不给出具体的错误消息。但是，从这一点开始，您应该可以轻松扩展它。

$(document).ready(function () {

    $("#button").on('click', function (e) {  // <- capture the button click

        e.preventDefault();                  // <- block the form submit

        // test your form's validity

        if ($('#name').val() == '') {        // <- make name field required
            alert('form not valid');         // <- form not valid - somehow alert user
        } else {            
            $('#contactform').submit();      // <- form is valid - submit it
        }

    });

});

演示：http://jsfiddle.net/Z2RGa/