javascript - jquery 数字验证工作不一致

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

问题是您在触发 jquery 验证之前就触发了 evt.preventDefault()。这基本上会杀死 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();
        }
});