Jquery validation,submithandler does not work

Question

I am trying to do some additional checks and formatting on certain fields of my form before it is submitted. Hence I used the bassistance jquery validation plugin. It works well as it displays all the manadatory error messages properly, however as soon as I supply the necessary values, the form simply submits. At this point I am not even sure if submitHandler is even triggered. Any ideas?

Form html: http://jsfiddle.net/7PAZU/

$(function() {
    $("#commentForm").validate({
        rules: {
            bill_first_name: {
                required: true
            },
            bill_last_name: {
                required: true
            },
            email: {
                required: true,
                email: true
            },
            Phone: {
                required: true,
                number: true
            },

            bill_address_one: {
                required: true
            },
            bill_city: {
                required: true
            },
            bill_state_or_province: {
                required: true
            },
            charge_total: {
                required: true,
                float: true
            },
        },
        messages: {
            bill_first_name: {
                required: "Please put in First Name"
            },
            bill_last_name: {
                required: "Please put in last Name"
            },
            email: {
                required: "Please enter a valid email"
            },
            phone: {
                required: "Please enter a valid Phone Number"

            },

            bill_address_one: {
                required: "Please put in Address"
            },
            bill_city: {
                required: "Please put in  City"
            },
            bill_state_or_province: {
                required: "Please put in state"
            },
            charge_total: {
                required: "Please put Amount In Whole number such as 10.00",
                number: "Please put in Amount In Whole number such as 10.00"
            },
        },
        submitHandler: function(frm) {
            $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2));
            alert("Dukhche Na");
            return false;
        }
    });
})​

Answer 1

Your code is failing because you are using a validation rule that does not exist.

charge_total: {
                required: true,
                float: true // there's no validator named `float`
            } // Comma removed here

But there is no validator named float in that plugin. Remove that and it will work fine. You can create a custom float validator if you want.

Working Fiddle

Check list of available rules here http://docs.jquery.com/Plugins/Validation#Validator

How did I find this?

I checked the console and found this error being thrown

Uncaught TypeError: Cannot call method 'call' of undefined 

From the following line inside plugin source file

var result = $.validator.methods[method]
      .call( this, element.value.replace(/\r/g, ""), element, rule.parameters );

Meaning $.validator.methods[method] is undefined which proves that you are using a validator that does not exist.

So I Checked available validation methods list and your rules and found you are using float rule which is not available.

So JS is throwing this error and stopping execution, so your submit handler is not being called and form is being submitted(Which is the default behavior unless you prevent that using JS).