我有一些文本框和一個提交按鈕。我已經使用HTML5'必需'驗證。它的工作正常。現在我想在HTML5驗證沒有找到任何錯誤時調用按鈕單擊的函數。當未提供必填字段時,按鈕點擊不會調用該功能。Html5驗證成功後調用函數
回答
你會需要一些額外的幫助做到這一點,它可以在普通的JavaScript形式。就個人而言,我會使用jQuery來幫助你,因爲它可以讓你更輕鬆,並解決任何跨瀏覽器的一致性問題。無論您是否想要使用jQuery,您都可以選擇,但僅適用於此是另一個對話,下面的示例只是一個示例。
下面是使用jQuery的一個假設的例子是實現您的驗證聽音功能:
HTML
<form>
<input type="text" class="input-text" required>
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
JS
$textInputs = $('input.input-text');
$textInputs.on('keyup', function() {
var $validTextInputs = $('input.input-text:valid'),
$submit = $('#submit');
console.log($textInputs.length, $validTextInputs.length);
if($textInputs.length === $validTextInputs.length){
//all text fields are valid
$submit.attr('disabled', null);
} else {
//not all text fields are valid
$submit.attr('disabled', '');
}
});
CSS(只讓我們知道,在視覺上,當輸入有效)
.input-text:valid {
background: green;
}
見的例子在這裏的行動:http://jsfiddle.net/m6QXc/
那麼,你可以試試這個:fiddle example根據你的需要擴展它,儘管使用jQuery。您可以在裏面添加任何內容:
$('#exampleForm').submit(function(e){
e.preventDefault();
// here you can call your own js methods, send form with ajax?
// or what ever you want
});
如果我在e.preventDefault之後給出警報,則該行不執行。 – Saikat
您可以使用form.onsubmit
處理程序。假設形式的ID是form
:
var form = document.getElementById("form");
form.onsubmit = function() {
//Pre-submission validation.
//Return true or false based on whether the validation passed.
//return false will prevent the submission the form.
};
此代碼無法正常工作。 'onsubmit'錯誤。 – Saikat
@Saikat:經過測試和爲我工作。在複製/粘貼之前,您是否確定表格的ID是「form」? –
使用jQuery HTML5表單驗證後觸發功能
<form id="myForm">
<input type="text" class="input-text" required>
<input type="submit" id="submit" class="input-button" disabled>
</form>
$("myForm").submit(function(){
// Your code
})
- 1. jquery驗證模塊和函數調用成功後
- 2. 在完成所有驗證時調用成功jQuery驗證插件的函數
- 3. satellizer redirectUri不成功後成功驗證
- 4. jQuery驗證插件:成功函數
- 5. 成功後的Ajax調用函數
- 6. 功能完成後調用函數
- 7. oauth成功後的調用函數
- 8. jQuery驗證:在表單驗證後調用函數
- 9. ajax在laravel驗證後的成功函數
- 10. ajax成功調用定製驗證
- 11. 成功驗證後通過Shibboleth憑證
- 12. jQuery提交函數不會調用html5驗證
- 13. 在調用php函數之前驗證html5表單?
- 14. AJAX函數調用成功
- 15. 成功jQuery驗證問題後的Ajax調用
- 16. 如何在Spring驗證成功後調用JavaScript?
- 17. jQuery驗證程序如果未驗證,則調用成功
- 18. Spring Security登錄成功後,如何回調AJAX成功函數?
- 19. 成功提交後重置aurelia驗證
- 20. Jquery:成功驗證後提交表單
- 21. 成功驗證字段後阻止UI
- 22. 表單驗證成功後顯示Fancybox
- 23. asp.net驗證與jQuery的成功回調
- 24. jQuery驗證成功
- 25. 調用成功回調函數
- 26. jQuery驗證回調函數
- 27. ajax調用成功函數完成後執行語句
- 28. 驗證完成後mvc3驗證功能運行
- 29. jQuery驗證插件:回調字段成功驗證?
- 30. SPNEGO:成功的談判和身份驗證後的後續調用
你所需要的JavaScript。 –