Question

我想在提交之前对表单的某些字段进行一些额外的检查和格式化。因此我使用了bassistance jquery验证插件。它运行良好，因为它正确显示所有的manadatory错误消息，但是只要我提供必要的值，表单就会提交。此时我甚至不确定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;
        }
    });
})

Answer 1

您的代码失败，因为您使用的验证规则不存在。

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

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

Working 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阻止该行为，否则这是默认行为。）

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;
        }
    });
})

Jquery验证，submithandler不起作用

2 个答案: