Can't validate contact form with JQuery

Question

This is my very first attempt at building a website. I need to validate my contact form (no plugins) with JQuery. I tried following a few tutorials but nothing I try works. What am I doing wrong? :(

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();
            }
        }
    });
});

Also, how can I make it so the form emails me the details?

Answer 1

Quote OP:

"I need to validate my contact form (no plugins) with jQuery. I tried following a few tutorials but nothing I try works. What am I doing wrong?"

$(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();
            }
        }
    });
});

There are quite a few syntax problems here, but most importantly, the code you're trying to make work depends on a plugin! The .validate() method used in this context is part of the jQuery Validate plugin, which you've not included in the jsFiddle.

BTW, There is no such thing as a .validate() method in jQuery without using a plugin.

---

Here are the problems...

1) You must include the jQuery Validate plugin or the .validate() method means nothing to jQuery.

2) Your submit button needs to be a type="submit" and does not need any inline JavaScript onclick handlers. Change this...

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

into this...

<input type="submit" />

3) The rules option is spelled rules and not rule.

4) The messages and submitHandler options do not belong inside of rules. They are siblings or rules, not children.

5) For your required rule under email, the true value does not belong within quotation marks.

6) You will not need to include the submitHandler callback as long as it only contains form.submit(), because that is the default behavior.

$(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"
        }
    });
});

Working DEMO: http://jsfiddle.net/g6P7c/

---

See my other answer for how to do jQuery Validation without a plugin.

Answer 2

Quote OP:

"I need to validate my contact form (no plugins) with jQuery. I tried following a few tutorials but nothing I try works. What am I doing wrong?"

See my other answer for a detailed explanation of the syntax problems in your original code. The code you're trying to make work depends on a plugin! The .validate() method used in this context is part of the jQuery Validate plugin, which you've not included in the jsFiddle.

BTW, There is no such thing as a .validate() method in jQuery without using a plugin.

However, without a plugin, and without doing all of your homework for you, here is a very crude demo of something like you'll need to do. It only validates one field as required and does not give specific error messages. However, from this point, you should be able to expand it easily.

$(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/

Answer 3

First replace:

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

to:

<input type="submit"/>

You don't need use button and listen "onclick", and put right options for 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();
    }
 }

example: http://jsfiddle.net/LnQ9C/2/

Answer 4

You don't need jQuery for this. Or even 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" />

Done. This is the magic of HTML5.