jquery编号验证工作不一致

jquery number validation not working consistently

本文关键字：不一致 工作 验证 编号 jquery      更新时间：2023-09-26

我在表单中使用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();
        }
    });

问题是在触发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();
        }
});

  • 您根本不应该需要click处理程序。根据文档，您的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.
    });

演示：http://jsfiddle.net/2vv8vL79/

相关文章：