0

当我的表单中的字段为空白时，我无法理解为什么验证器会显示成功消息。我被引导相信 $.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();
        }

    });


});
4

2 回答 2

2

success不仅当整个表单有效时，每个成功验证的输入都会调用该函数。从文档中：

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

在所有字段都成功验证之前，不会提交表单。如果您想在表单一切正常时显示一条消息，请在您的submitHandler函数中执行。

这是我的有效版本。（小提琴）

我删除了.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();
        }

    });


});
于 2013-07-04T18:58:04.313 回答
1

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

submitHandler: function() { ... }

也许将其更改为：

submitHandler:function(form) { ... }

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

于 2013-07-04T18:28:47.883 回答