Validate form using jQuery

Question

When a form submit button is clicked, a function to validate all the field is to be called. Nothing is to happen, however, if the validation fails.

I am using mailto: as my action, does this make a difference?
I would like to get clarification on two things:

1. Is this the correct way to call a function when clicking the submit button?

    $(document).ready(function(){ $('#contactForm').submit(function(){ checkMail(); }); }); 

2. Can I still validate the fields even though I'm using mailto: ?

Here is the rest of the code:

function checkEmail(){
    var email = document.contact.email.value;

    if(email == "") {
        document.getElemtById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

HTML:

<form name="contact" action="mailto:exampleemail@hotmail.com" method="post">
    <li>
        <label for="email">Email</label>
    <input id="email" type="text" name="email" placeholder="Enter Email Address">
    </li>
    <span id="email_error"></span>

Further, I don't get an error message on clicking submit.

Answer 1

No, you need the event handler to return false in case the validation failed. This will prevent the action from being executed, ie the mail program from being launched.

we can cancel the submit action by calling .preventDefault() on the event object or by returning false from our handler .

Source

Modify it like this:

$(document).ready(function(){
    $('#contactForm').submit(function(){
        return validate();
    });
});

Of course, this implies that the validate() function needs to actually return false in case the validation fails, and true otherwise .

Further you are missing id="contactForm" on your <form> tag.

Also, you need to grab the email value correctly:

var email = $("#email").val();

There's another mistake: You misspelled getElementById() . Here's a corrected version:

function checkEmail() {
    var email = $("#email").val();

    if (email == "") {
        document.getElementById("email_error").innerHTML = "No Email Address";
        return false;
    }
    else {
        document.getElementById("email_error").innerHTML = ""
        return true;
    }
}

Or alternatively, using all jQuery:

function checkEmail() {
    var email = $("#email").val();
    var $error = $("#email_error");
    if (email == "") {
        $error.html("No Email Address");
        return false;
    }
    else {
        $error.html("");
        return true;
    }
}

Answer 2

Here's what you need:

$(document).ready(function(){
   $('#contactForm').submit(function(){
       if (!validate()) {
           return false; // Prevent the submit
       }
   });
});

Answer 3

For validating the fields of your form, before sending it, you can use the jQuery's validation plugin:

$(document).ready(function(){

    $("#contactForm").validate({
        submitHandler: function(form) {
            // some other code
            // maybe disabling submit button
            // then:
            $(form).submit();
        }
    });

});

Check the online doc for more information and examples: http://docs.jquery.com/Plugins/Validation#Validate_forms_like_you.27ve_never_been_validating_before.21