Html5驗證成功後調用函數

Question

我有一些文本框和一個提交按鈕。我已經使用HTML5'必需'驗證。它的工作正常。現在我想在HTML5驗證沒有找到任何錯誤時調用按鈕單擊的函數。當未提供必填字段時，按鈕點擊不會調用該功能。

Answer 1

你會需要一些額外的幫助做到這一點，它可以在普通的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/

Answer 2

那麼，你可以試試這個：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 
     }); 

Answer 3

您可以使用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. 
}; 

Answer 4

使用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  
    })