使用jquery(插件)验证表单时遇到问题

时间:2013-03-27 14:31:08

标签: jquery jquery-validate validation

插件似乎工作正常。如果我将我的两个字段留空,我会收到通知,说明它们是必需的,并且它们必须是有效的数字。

我遇到的问题是如果我用正确的数据填写两个文本字段并按下我的添加按钮,我在下面的代码中遇到错误。数据仍然会被发送到我的控制器并执行我的添加,但警报从我的错误部分启动。

    $(document).ready(function (e) {
            $("#frmOverride").validate({
                rules: {
                    maintenancePercentage: {
                        required: true,
                        number: true
                    },
                    officePercentage: {
                        required: true,
                        number: true
                    }
                }
            });
     }

此部分位于我的保存按钮的点击事件中:

        var seg1 = dataItem.Seg1_Code;
        var maintPercentage = $("#maintenancePercentage").val();
        var officePercentage = $("#officePercentage").val();

        if ($('#frmOverride').validate().form()) {
            $.ajax({
                type: "POST",
                url: "/PayrollMarkup/AddPayrollMarkupOverride",
                data: {
                    seg1: seg1,
                    maintenancePercentage: maintPercentage,
                    officePercentage: officePercentage
                },
                success: function (data) {
                    //console.log(data);
                    var window = $("#window").data("kendoWindow");
                    $('#window_wnd_title').text("");
                    window.close();
                    $("#maintenancePercentage").val('');
                    $("#officePercentage").val('');

                    readDefaultsGrid();

                    readNotDefaultsGrid();
                },

                error: function (e) {
                    console.log(e);
                    alert("There was an error setting custom values. Maintenance % and Office % are required.");
                }
            });
        }

2 个答案:

答案 0 :(得分:1)

您需要清理代码,您的代码正在搜索相同的标记4(!)次。

而不是重复$('#PayrollMarkupDefaultsGrid')。data(“kendoGrid”)四次将其存储在一个变量中,并通过该变量使用其方法和成员。

至于你的问题,我相信当你已经尝试使用它时,你的kendo对象还没有被初始化。我相信你的代码会抛出异常:

$('#PayrollMarkupDefaultsGrid').data("kendoGrid").dataSource.read();

因为标记不存在或者未初始化为kendo对象,或者kendo对象没有公共dataSource成员,或者dataSource成员没有read()函数。请检查这些并告诉我您的结果。

答案 1 :(得分:1)

没有必要这样做......

if ($('#frmOverride').validate().form()) {
        $.ajax({ ...

你当然不希望在click事件处理程序中执行任何操作。这是因为jQuery Validate插件已经捕获click事件,检查有效表单,并提供submitHandler回调函数,该函数完全用于通过ajax提交。

As per documentation

  

submitHandler ,回调,默认:默认(本机)表单提交

当表单处理实际提交的回调   是有效的。获取表单作为唯一参数。替换默认值   提交。 通过Ajax提交表单的正确位置   验证

$(document).ready(function () {

    $("#frmOverride").validate({
        rules: {
            maintenancePercentage: {
                required: true,
                number: true
            },
            officePercentage: {
                required: true,
                number: true
            }
        },
        submitHandler: function (form) {
            // your ajax goes here
            return false; // to block page redirect since you're using ajax
        }
    });

});

简单演示:http://jsfiddle.net/4kn3y/