2013-03-27 148 views
0

該插件似乎工作正常。如果我將兩個字段留空,我會收到通知他們是必需的,他們必須是有效的號碼。使用jquery驗證表單(插件)

我遇到的問題是,如果我用正確的數據填寫兩個文本字段,並打我的添加按鈕,我在我的代碼下面的錯誤。數據仍然發送到我的控制器,我的添加被執行,但警報從我的錯誤部分觸發。

$(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."); 
       } 
      }); 
     } 

回答

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/

+0

謝謝。我儘快地瀏覽一下文檔。 – Mithrilhall 2013-03-27 15:42:06

+0

@Mithrilhall,沒問題,這可能是最常見的錯誤。 – Sparky 2013-03-27 15:48:06

+0

如果我需要使用自己的自定義消息更改錯誤消息,該怎麼辦? – Bhuvan 2013-04-22 16:32:08

1

你需要清理你的代碼,你的代碼搜索相同標籤的4倍(!)。

而不是重複$('#PayrollMarkupDefaultsGrid')。data(「kendoGrid」)四次將其存儲在變量中,並通過該變量使用其方法和成員。

至於你的問題,我相信當你已經嘗試使用它的時候你的kendo對象還沒有被初始化。我相信,你的代碼拋出此異常:

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

因爲無論是標籤不存在或者未初始化的劍道對象或劍道對象不具有公共數據源成員或數據源成員沒有read()函數。請檢查這些並讓我知道你的結果。

+0

我清理作爲一個小建議,你的代碼(謝謝),但我不會在我的控制檯看到任何錯誤。 – Mithrilhall 2013-03-27 15:09:28

+0

我很高興你的問題解決了。 – 2013-03-27 16:17:37