Question

我在表单中使用jquery验证。我没有遇到很多问题，但是我确实在用户表单中遇到了问题，其中jquery数字验证没有被解雇。我在IE，firefox和chrome中测试过它并没有在其中任何一个中运行。奇怪的是，到目前为止，它似乎特定于这一个用户的形式，因为当我转到其他用户表单时，警报会像我在所有浏览器中的测试中那样点火。我想知道在使用jquery验证之前是否有其他人遇到过这个问题。下面是我正在使用的一些jquery验证代码的示例。

    var validator = $("#educationForm").validate({
            debug: true,
            errorElement: "span",
            errorClass: "help-block errortext",
            errorPlacement: function (error, element) {
                element.before(error);
            },
            success: function (label) {
                label.remove();
            },
            rules: {
                school1GPA: {
                    number: true
                },
                school2GPA: {
                    number: true
                },
                school1Units: {
                    number: true
                },
                school2Units: {
                    number: true
                },
            },
            onsubmit: false
        });

    $('.form-actions').on('click', '#btnSubmit', function (evt) {
            evt.preventDefault();
            if ($("#educationForm").valid()) {

                $.ajax({
                    type: "POST",............
        } else {
           validator.focusInvalid();
        }
    });

Answer 1

问题是您在触发evt.preventDefault()验证之前触发了jquery。这基本上会杀死evt.preventDefault()之后的任何验证语句。您只需拨打$("#educationForm").valid()或jquery.validate()，然后拨打evt.preventDefault()即可。

 $('.form-actions').on('click', '#btnSubmit', function (evt) {

            if ($("#educationForm").valid()) {
                evt.preventDefault(); // prevents the form submission to allow ajax
                $.ajax({
                    type: "POST",............
        } else {
           validator.focusInvalid();
        }
});

Answer 2

您根本不需要click处理程序。 As per documentation，您的ajax属于submitHandler回调函数。
除非您在点击提交按钮时希望验证被屏蔽，否则您也不应将onsubmit设置为false。

debug

true将阻止提交表单。

更像这样......

 var validator = $("#educationForm").validate({
        // debug: true, // <- this is blocking the submit entirely
        submitHandler: function(form) {
            // your ajax here
            $.ajax(...);
            return false;
        },
        errorElement: "span",
        errorClass: "help-block errortext",
        errorPlacement: function (error, element) {
            element.before(error);
        },
        success: function (label) {
            label.remove();
        },
        rules: {
            school1GPA: {
                number: true
            },
            school2GPA: {
                number: true
            },
            school1Units: {
                number: true
            },
            school2Units: {
                number: true
            },
        },
        // onsubmit: false  // <- this is preventing validation on the submit.
    });

DEMO：http://jsfiddle.net/2vv8vL79/

jquery数字验证不能始终如一地工作

2 个答案: