Jquery验证，submithandler不起作用

Question

我想在表单提交之前对某些字段进行额外的检查和格式化。因此，我使用了bassistance jquery验证插件。它可以很好地显示所有必需的错误信息，但是一旦我提供了必要的值，表单就会立即提交。此时，我甚至不确定是否触发了submitHandler。有什么想法吗？

表单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;
        }
    });
})​

- user734081

---

你的 JavaScript 控制台在表单提交时报告任何错误吗？ - Fabrizio Calderan

首先，您有额外的逗号 - 这会在IE中引起问题。 - Manse

我使用Firebug，但它不是这样的。 - user734081

你能够引入你的HTML吗？并确认页面上没有错误？也许你的表单没有正确的ID，这也可能是没有绑定的原因？ - Manse

@user734081，请检查我的答案，它将解决这个问题。 - Prasenjit Kumar Nag

Answer 1

您的代码失败是因为您正在使用一个不存在的验证规则。

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

但是该插件中没有名为float的验证器。删除它就可以正常工作了。如果您想要，可以创建自定义的float验证器。

运行中的 Fiddle

可用规则的检查列表在这里http://docs.jquery.com/Plugins/Validation#Validator

我是如何发现这个问题的？

我检查了控制台并发现了这个错误被抛出。

Uncaught TypeError: Cannot call method 'call' of undefined 

从插件源文件中的以下行开始

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

意思是 $.validator.methods [method] 未定义，这证明您正在使用不存在的验证器。

所以我检查了可用的验证方法列表和your rules，发现您正在使用不可用的float规则。

因此，JS会抛出此错误并停止执行，因此您的submit handler不会被调用，并且表单将被提交（这是默认行为，除非您使用JS防止）。

- Prasenjit Kumar Nag

Answer 2

IE对额外的逗号特别挑剔...首先移除它们：

$(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
            } // Comma removed here
        },
        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"
            } // Comma removed here
        },
        submitHandler: function(frm) {
            $("#charge_total").val(parseFloat($("#charge_total").val()).toFixed(2));
            alert("Dukhche Na");
            return false;
        }
    });
})​

- Manse

---

最有可能是逗号出错了...我遇到过这种情况很多次。 - coolguy

@user734081пјҢжӮЁиғҪеҗҰеңЁй—®йўҳдёӯеҢ…еҗ«formзҡ„HTMLд»Јз Ғпјҹе®ғжҳҜеҗҰзЎ®е®һе…·жңүcommentFormзҡ„IDпјҹ - Manse

@ManseUK 是的，它们具有相同的ID，并且验证规则通常有效，问题似乎只出现在submitHandler中。 - user734081