如何在使用HTML5驗證時綁定到提交事件？

在HTML5的瀏覽器，驗證發生前submit事件。所以如果表單無效，提交事件從不會觸發。

我想掛鉤一個事件到表單提交，以觸發表單是否有效。以下是一個小例子，當用戶提交表單時，我正在嘗試alert()。

HTML：

<!DOCTYPE html> 
<html> 
    <head><title>Example</title></head> 
    <body> 
     <form> 
      <input type="text" name="foo" required title="Foo field"/> 
      <input type="submit"/> 
     </form> 
    </body> 
</html>

的JavaScript：

$(function() { 
    $('form').submit(function() { 
     alert('submit!') 
    }); 
});

互動演示：http://jsfiddle.net/gCBbR/

我的問題是：做瀏覽器提供，我可以綁定到會之前運行的替代活動驗證？

來源

2011-09-28 Portman

是的，有這個原因的事件被執行，永久處理使用。當用戶通過HTML5驗證方法checkValidity()檢查有效性時，當用戶嘗試提交for orr時，該事件被稱爲invalid。這個事件不會在blur或類似的東西上觸發，因爲您的input標記中包含HTML驗證屬性，所以不會調用checkValidity()。但它在表單提交之前會觸發。

從W3C：

當調用checkValidity(）方法，如果元素是一個候選約束驗證並不能滿足其限制，用戶代理必須觸發名爲invalid 一個簡單的事件即在元素處可取消（但在此情況下沒有默認操作）並返回false。否則，它只能在沒有的情況下返回true。

比如你有這樣的標記：

然後你需要調用checkValidity()火invalid事件如果input數據是無效的：

document.querySelectorAll('input')[0].addEventListener('blur', function(){ 
     this.checkValidity(); 
    }, false); 

document.querySelectorAll('input')[0].addEventListener('invalid', function(){ 
     console.log('invalid fired'); 
    }, false);

在這裏看看我的例子： http://jsbin.com/eluwir/2

來源

2011-09-28 18:29:12 Mohsen

其實這並非完全正確。無效事件通過編程約束驗證（checkValidity）*和*交互式表單驗證（用戶嘗試提交具有無效輸入的表單）觸發。此外，還有兩個其他的巨大差異，無效被觸發爲每個無效輸入並提交一次+無效事件不會冒泡到窗體（您可以使用捕獲...）。 –

@alexanderfarkas，你是完全正確的。我誤解了規範。編輯我的答案。此事件在提交之前觸發：http://jsbin.com/eluwir/3/edit – Mohsen

-1

$(function() { 
    $('form').one('submit',function() { 
     alert(1); 

     [...] 

     $(this).submit(); // optional 
     return false; // returning false skips validator's trigger 
    }); 
});

這段代碼只有一次$.bind

來源

2011-09-28 18:15:48 bazilio

我認爲你誤解了這個問題。如果表單未通過HTML5驗證，則提交事件永遠不會被觸發。 – Portman

-2

如果你想使用瀏覽器默認的VA你應該使用以下內容，因爲你需要綁定到默認提交然後阻止它，並使用$ .ajax或$ .post

$("form").bind('submit', function(e){ 
     e.preventDefault(); 

     $.post("url",$("form").serialize(),function(data){ 
          $("#result").html(data).show(); 
           }); 
     });

來源

2012-10-30 08:47:59 Bakly

如何在使用HTML5驗證時綁定到提交事件？

回答

相關問題