JavaScript form validation on submit.

Question

I have a little problem with JavaScript form validation. I would like validation error to show only after the user clicks submit.

Right now validation occurs when you type in any input field.

Example:

HTML:

<form id="contact_form" method="post">

    <li>
        <input type="text" placeholder="Name" name="name">
    </li>
    <li>
        <input type="text" placeholder="E-mail" name="email">
    </li>
    <li>
        <input type="text" placeholder="Subject" name="subject">
    </li>
    <li>
        <textarea type="text" placeholder="Message" name="message"></textarea>
    </li>
    <li>
        <input type="submit" name="submit" value="Send" class="send-button">
    </li>
</form>
<div class="validate-error"></div>

JavaScript:

$(function() {

  $('#contact_form').validate({
    errorElement: 'div',
    errorClass: 'validate-error',
    focusInvalid: false,
        rules: {
            name: 'required',
            email: {
                required: true,
                email: true
            },
            subject: {
                required: true,
                minlength: 5
            },
            message: {
                required: true
            }
        },
        showErrors: function(errorMap, errorList) {
            $(".validate-error").html("All fields must be completed before you submit the form.");
        }
    }); 
});

http://jsfiddle.net/ZrfhU/215/

Answer 1

Place your code into function and then trigger function with the click of the button like so:

function validate() {
    // your code
}

$(".send-button").click(function() {
    validate();
});

Check demo: http://jsfiddle.net/ZrfhU/217/