Form submits even with validation errors

[thetwig]

The form submits even when there are validation errors. How do I disable the submit button when there are validation errors? Here is the .js file

,submitFu:function(){
_.validateFu(_.labels)                          
if(!_.form.has('.'+_.invalidCl).length)
    $.ajax({
        type: "POST",
        url:_.mailHandlerURL,
        data:{
            name:_.getValFromLabel($('.name',_.form)),
            email:_.getValFromLabel($('.email',_.form)),
            phone:_.getValFromLabel($('.phone',_.form)),
            //fax:_.getValFromLabel($('.fax',_.form)),
            //state:_.getValFromLabel($('.state',_.form)),
            message:_.getValFromLabel($('.message',_.form)),
            owner_email:_.ownerEmail,
            stripHTML:_.stripHTML
        },
        success: function(){
            _.showFu()
        }
    })          
},
showFu:function(){
_.success.slideDown(function(){
    setTimeout(function(){
        _.success.slideUp()
        _.form.trigger('reset')
    },_.successShow)
})
},

And here is the form:

<form id="contact-form" action="contactTq.php" method="post">
                    <div class="success"> Contact form submitted! <strong>We will be in touch soon.</strong></div>
                    <fieldset>
                        <label class="name">
                            <input type="text" name="name" value="Enter Your Name:" >
                            <span class="error">*This is not a valid name.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="email">
                            <input type="text" name="email" value="Enter Your E-mail:">
                            <span class="error">*This is not a valid email address.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="phone">
                            <input type="text" name="phone" value="Enter Your Phone (optional):">
                            <span class="error">*This is not a valid phone number.</span>
                            <span class="clear"></span>
                        </label>
                        <label class="message">
                            <textarea name="msg">Enter Your Message:</textarea>
                            <span class="error">*The message is too short.</span>
                            <span class="empty">*This field is required.</span>
                            <span class="clear"></span>
                        </label>
                        <div class="buttons"><strong><a class="button" data-type="reset">Reset<span></span></a></strong><strong><a class="button" data-type="submit" href="javascript:{}" onclick="document.getElementById('contact-form').submit();">Submit<span></span></a></strong></div>
                    </fieldset>
                </form>

Very urgent! Any help would be much appreciated.

The form submits even when there are validation errors. How do I disable the submit button when there are validation errors? Here is the .js file

You need something like this (if there is an validation errors it won't submit until the data is corrected):

http://jquery.bassistance.de/validate/demo/

I copy the code from the link to here:

$.validator.setDefaults({
    submitHandler: function() { alert("submitted!"); }
});

$().ready(function() {
    // validate the comment form when it is submitted
    $("#commentForm").validate();

    // validate signup form on keyup and submit
    $("#signupForm").validate({
        rules: {
            firstname: "required",
            lastname: "required",
            username: {
                required: true,
                minlength: 2
            },
            password: {
                required: true,
                minlength: 5
            },
            confirm_password: {
                required: true,
                minlength: 5,
                equalTo: "#password"
            },
            email: {
                required: true,
                email: true
            },
            topic: {
                required: "#newsletter:checked",
                minlength: 2
            },
            agree: "required"
        },
        messages: {
            firstname: "Please enter your firstname",
            lastname: "Please enter your lastname",
            username: {
                required: "Please enter a username",
                minlength: "Your username must consist of at least 2 characters"
            },
            password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long"
            },
            confirm_password: {
                required: "Please provide a password",
                minlength: "Your password must be at least 5 characters long",
                equalTo: "Please enter the same password as above"
            },
            email: "Please enter a valid email address",
        }
    });

    // propose username by combining first- and lastname
    $("#username").focus(function() {
        var firstname = $("#firstname").val();
        var lastname = $("#lastname").val();
        if(firstname && lastname && !this.value) {
            this.value = firstname + "." + lastname;
        }
    });

});
</script>

This is the form for the 1st example:

<form class="cmxform" id="commentForm" method="get" action="">
    <fieldset>
        <legend>Please provide your name, email address (won't be published) and a comment</legend>
        <p>
            <label for="cname">Name (required, at least 2 characters)</label>
            <input id="cname" name="name" minlength="2" type="text" required />
        <p>
            <label for="cemail">E-Mail (required)</label>
            <input id="cemail" type="email" name="email" required />
        </p>
        <p>
            <label for="curl">URL (optional)</label>
            <input id="curl" type="url" name="url" />
        </p>
        <p>
            <label for="ccomment">Your comment (required)</label>
            <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
            <input class="submit" type="submit" value="Submit"/>
        </p>
    </fieldset>
</form>

I assume this is what you are asking. If not please explain more.