如何在用戶進行更改後在文本框上重新運行驗證

我有一個必需的文本框。當用戶單擊提交按鈕時，如果沒有輸入值，驗證將觸發並阻止提交表單。我希望在用戶在文本框中鍵入一個值以使用戶知道輸入的值有效後，錯誤消息就會消失。現在，驗證錯誤消息在用戶進行更改後保持可見。我正在使用jquery驗證。如何在用戶進行更改後在文本框上重新運行驗證

來源

2012-03-01 Tom Schreck

$('input[type="text"]').on('keyup', function() { 
    if (this.value === '') { 
     //this input is blank 
    } 
});

您可以設置標誌的submit事件處理程序進行檢查：

var error = false; 
$('input[type="text"]').on('keyup', function() { 
    if (this.value === '') { 
     error = true; 
     $(this).addClass('form-error'); 
    } else { 
     error = false; 
     $(this).removeClass('form-error'); 
    } 
}); 
$('form').on('submit', function() { 

    //trigger a `keyup` event on all the inputs in this form, to force validation if the input has not been changed 
    $(this).find('input').trigger('keyup'); 
    console.log(!error); 
    return !error;//will return true if there is not error, and false if there is an error 
});

注意我用了keyup事件，因爲該元素的value將由點發生了變化。

這裏是一個演示：http://jsfiddle.net/jasper/NawBk/

注意.on()是新的一樣的jQuery 1.7的，是在這種情況下一樣.bind()：http://api.jquery.com/on

，是的，我只是你使用jQuery實現驗證插件，我會繼續並離開這篇文章，因爲我認爲它仍然可以幫助人們。

來源

2012-03-01 23:14:58 Jasper

我喜歡這種方法，可以讓它在我的代碼中工作。我也在使用jQuery驗證消息。因此，當用戶未在必填字段中輸入值時，會在用戶界面中顯示一條消息。在用戶在文本框中輸入值後，如何讓消息消失？ – 2012-03-01 23:44:17

@TomSchreck在我上面的代碼中，每次在文本輸入中按下一個鍵時，它都會被驗證，所以如果它的值是有效的，那麼驗證完成後應該刪除錯誤消息。我還會在每個輸入中觸發一個'keyup'事件，以確保它在發送表單之前已經過驗證。 – Jasper 2012-03-02 00:08:17

$('form :input').on('keypress',function(){ 
    $(this).closest('form').validate(); 
});

迫使它，因爲他們正在輸入的東西重新驗證。雖然只要用戶輸入內容，它應該自動識別它是否有效。確保您的驗證器按預期工作。

來源

2012-03-01 23:17:35

如何在用戶進行更改後在文本框上重新運行驗證

回答

相關問題