Question

这是我第一次建立网站的尝试。我需要使用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();
            }
        }
    });
});

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

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

首先替换：

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

为：

<input type="submit"/>

您不需要使用按钮并听取＆＃34; onclick＆＃34;，并为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 3

引用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()方法是其中的一部分the jQuery Validate plugin的you've not included in the jsFiddle，http://jsfiddle.net/g6P7c/。

BTW，如果不使用插件，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）对于required下的email规则，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"
        }
    });
});

工作演示：See my other answer

{{3}}了解如何在没有插件的情况下进行jQuery验证。

Answer 4

引用OP：

“我需要使用jQuery验证我的联系表单（没有插件）。我尝试了一些教程，但我尝试的都没有。我做错了什么？”

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

BTW，如果不使用插件，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
        }

    });

});

DEMO：http://jsfiddle.net/Z2RGa/

无法使用JQuery验证联系表单

4 个答案: