CODEWITHSUNDEEP
javascriptjquery
Richlewis
Richlewis

Reputation: 15374

Validate form using jQuery

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:[email protected]" 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.

Upvotes: 0

Views: 638

Answers (3)

phant0m
phant0m

Reputation: 16905

No, you need the event handler to return false in case the validation failed. This will prevent the action from being executed, i.e. 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;
    }
}

Upvotes: 1

Littm
Littm

Reputation: 4947

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

Upvotes: 0

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

Here's what you need:

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

Upvotes: 0

Related Questions