Question

我无法理解为什么验证程序在表单中的字段为空时显示成功消息。我被引导相信$ .post不应该运行，直到所有字段都经过验证。我在这里想念一些简单的东西。如果有人能够指出我的错误，我将不胜感激。我使用的脚本位于：http://jqueryvalidation.org/。感谢

jquery代码

$(function () {

    $.validator.setDefaults ({

        errorClass: 'form_error',
        errorElement: 'div'
    });

    $("#BA_boxform").validate({
        rules: {
            BA_customer: {
                required: true
            },
            customerdept: {
                required: true
            },
            customeraddress: {
                required: true
            },
            BA_service: {
                required: true
            },
            BA_box: {
                required: true
            },
            BA_destdate: {
                required: true
            },
            BA_authorised: {
                required: true
            }
        },
        messages: {
            BA_customer: {
                required: '<br />* required: You must select a customer'
            },
            customerdept: {
                required: "<br />* required: You must select a department"
            },
            customeraddress: {
                required: "<br />* required: You must select a customer address"
            },
            BA_service: {
                required: "<br />* required: You must select a service level"
            },
            BA_box: {
                required: "<br />* required: You must enter a box number for intake"
            },
            BA_destdate: {
                required: "<br />* required: You must enter a destruction date"
            },
            BA_authorised: {
                required: "<br />* required"
            }
        },

        submitHandler: function()   {
                if ($("#BA_boxform").valid() === true)  { 
                var data = $("#BA_boxform").serialize();
                $.post('/domain/admin/requests/boxes/boxesadd.php', data, function()    {


                }, 'json');
        } else
                { 
            return; 
                }
        },
        success:  function(msg) {
                $("#BA_addbox").html("You have entered a box");
                //$("#BA_boxform").get(0).reset();
        }

    });


});

Answer 1

为每个成功验证的输入调用success函数，而不仅仅是在整个表单有效时。来自文档：

如果指定，则显示错误标签以显示有效元素。如果给出了String，则将其作为类添加到标签中。如果给出了一个Function，则使用标签（作为jQuery对象）和验证的输入（作为DOM元素）调用它。标签可用于添加“ok！”等文本。

在所有字段成功验证之前，不会提交表单。如果您希望在表单完好时显示消息，请在submitHandler函数中执行此操作。

这是我的版本。（FIDDLE）

我在提交处理程序中删除了.valid()检查;它是多余的，因为除非表单有效，否则不会调用提交处理程序。在调用$.post()之前，我移动了“你已进入一个盒子”的消息，因为小提琴无法发布任何内容;这证明我们到了那里。

$(function () {

    $.validator.setDefaults({

        errorClass: 'form_error',
        errorElement: 'div'
    });

    $("#BA_boxform").validate({
        rules: {
            BA_customer: {
                required: true
            },
            customerdept: {
                required: true
            },
            customeraddress: {
                required: true
            },
            BA_service: {
                required: true
            },
            BA_box: {
                required: true
            },
            BA_destdate: {
                required: true
            },
            BA_authorised: {
                required: true
            }
        },
        messages: {
            BA_customer: {
                required: '<br />* required: You must select a customer'
            },
            customerdept: {
                required: "<br />* required: You must select a department"
            },
            customeraddress: {
                required: "<br />* required: You must select a customer address"
            },
            BA_service: {
                required: "<br />* required: You must select a service level"
            },
            BA_box: {
                required: "<br />* required: You must enter a box number for intake"
            },
            BA_destdate: {
                required: "<br />* required: You must enter a destruction date"
            },
            BA_authorised: {
                required: "<br />* required"
            }
        },

        submitHandler: function () {
            $("#BA_addbox").html("You have entered a box");
            var data = $("#BA_boxform").serialize();
            $.post('/domain/admin/requests/boxes/boxesadd.php', data, function () {

                $("#BA_addbox").html($("#BA_addbox").html() + "<br>You have entered a box");
            }, 'json');
        },
        success: function (msg) {
            //$("#BA_addbox").html("You have entered a box");
            //$("#BA_boxform").get(0).reset();
        }

    });


});

Answer 2

我认为问题在于你应该将表单作为参数传递给行：

submitHandler: function() { ... }

可能会将其更改为：

submitHandler:function(form) { ... }

然后使用参数而不是id来组织数据

如果未经验证，jQuery验证器调用成功

2 个答案: