jQuery驗證插件不驗證的形式$ .validate（）

我有一個頁面，已成功使用jQuery驗證插件來驗證幾個文本字段。有幾個提交頁面上的按鈕，我已經配置如下驗證：

_validator = $("#ftsEditTripForm").validate({ 
    onkeyup: false, 
    submitHandler: function() {} 
});

我註冊下列click事件處理程序在頁面上所有提交按鈕：

function clickHandler(jqEvent) { 
    var action = jqEvent.target.id; 
    if (action !== "cancel") { 
     _form$.validate(); 
     if (_validator.numberOfInvalids() === 0) { 
      submitForm(action); 
     } 
    } else { 
     confirmCancel(action); 
    } 
} 
function submitForm(action) { 
    $(".flowEvent").attr("name", "_eventId_" + action); 
    if (action === "submit") { 
     $("input[name=status]").val("S"); 
    } else { 
     $("input[name=status]").val("D"); 
    } 
    _form$[0].submit(); 
}

這有一直工作正常。直到用戶點擊其中一個提交按鈕，纔會進行驗證，如果該按鈕是「取消」按鈕，則會要求用戶確認他們希望在實際提交頁面之前丟失對該頁面所做的任何更改。因此，如果用戶單擊「取消」按鈕，然後單擊「否」按鈕，表示他們不想繼續取消操作，我們將停止提交頁面。

現在我已經將選項卡添加到導航欄中，並且如果用戶單擊其他選項卡以外的選項卡，則需要執行同樣的操作。該標籤被實現爲div的，並且我已經定義了以下點擊事件處理這些div：

function tabClickHandler(jqEvent) { 
    var target = jqEvent.target; 
    while (! $(target).hasClass("navTab")) { 
     target = target.parentNode; 
    } 
    var tabNumber = target.dataset.tabnumber; 
    _form$.validate(); 
    if (_validator.numberOfInvalids() === 0) { 
     $("input[name=tabNumber]").val(tabNumber); 
     submitForm("navbar"); 
    } 
}

我的問題是，當我點擊一個選項卡上_validator.numberOfInvalids（）總是返回0。我在我的驗證代碼中放置了一個斷點，當我單擊一個選項卡時，它不會被調用。因此，即使存在驗證錯誤，也始終提交該頁面。

我已經嘗試了一些東西 - 用於驗證插件的onsubmit和submitHandler選擇不同的值，改變標籤的div到按鈕 - 沒有成功。

我希望有人能指出我正確的方向。我必須以這種或那種方式工作，並且我想繼續使用驗證插件。

感謝您閱讀這篇文章。

Thom

來源

2014-03-05 Thom

這是什麼？

_form$.validate();

我從來沒有見過

你應該知道，.validate()方法僅用於初始化窗體上的插件命名爲這樣的（_form$）變量。

function clickHandler(jqEvent) { 
    var action = jqEvent.target.id; 
    if (action !== "cancel") { 
     _form$.validate(); 

    ....

所以，如果你沒有初始化它，直到你點擊按鈕後，那麼你將不會有任何驗證。

通常情況下，.validate()僅在DOM準備好事件處理程序中調用一次，被捕獲click事件是自動。您不能多次調用.validate()，因爲所有後續實例都被忽略。

由於您有一個要忽略的cancel按鈕，如果按下取消按鈕，則可以使用.rules('remove')方法有效取消驗證。事情是這樣的......

$('#myCancelButton').on('click', function(e) { 
    e.preventDefault(); 
    $('input, select, textarea').each(function() { 
     $(this).rules('remove'); // remove all rules 
    }); 
    // something to do on cancel 
    confirmCancel(action); 
});

來源

2014-03-07 23:50:13 Sparky

jQuery驗證插件不驗證的形式$ .validate（）

回答

相關問題