HTML5の検証でフォームイベントが失敗しましたか？

Question

私は何かが欠けているに違いない。

私はフォームがあります。

<form action="/" method="post"> 
    <input type="text" name="field" required /> 
    <input type="submit" value="Submit" /> 
</form> 

をそして私は、ユーザーがrequiredフィールドを入力せずにsubmitボタンをクリックしたときに特殊な動作を追加します。私はjQueryを持っているので、私の直感は次のように書きました。

$('form').on('submit', function(e){ 
    console.log('Adding special behavior'); 
}); 

これはトリガーされません。 $('form').on('validate')などが見つかりましたが、何も見つかりませんでした。

この手順ではイベントは発生していませんか？ requiredを削除して、すべての検証を手動で処理する必要がありますか？それは驚くべきことです！

おかげ

---

編集：私はjquery.validate.jsを使用して、私の質問は（私はそれを使用するために起こるが、これは単に助けにjQueryに依存しない（したく）ないので、これはthis questionの重複ではありません明確にするために）。私が明確にしたいのはHTML5の振る舞いです。

Answer 1

入力に必要な属性がある場合、ブラウザはフォームを送信する前に入力が有効であることを確認します。したがって、あなたのイベントは決して引き起こされません。

ただし、フォームにnovalidate属性を追加して、ブラウザの検証を回避し、入力に必要な属性を保持したまま手動による検証を実行できます。あなたが正常に提出からフォームを停止する場合

<form action="/" method="post" novalidate> 
    <input type="text" name="field" required /> 
    <input type="submit" value="Submit" /> 
</form> 

また、あなたはあなたのイベントでpreventDefaultを行う必要があります。

$('form').on('submit', function(e){ 

    e.preventDefault(); 
    console.log('Adding special behavior'); 

}); 

ここでデモです：https://jsfiddle.net/nyecdfrj/

Answer 2

フォームのonSubmit使用：

< form action="/" method="post" onsubmit="test()"> 

function test() { 
return false; //never submit 
}