form要素にsubmitイベントが発生していない場合

6174 ワード
html Event JavaScript テキストリンク
submitイベントは、フォームコミット時に発生するイベントです.form要素でsubmitイベントが発生した場合は、次のようになります.
  • フォーム要素内のinput(text、checkbox、radio)およびselect入力フィールド(textareaを除く)でEnterキーを押すと、
    • .
  • フォーム要素内のsubmitボタン(<button>、<input type="submit">)をクリックすると、
    • submitアクティビティの重要な特徴は次のとおりです.

  • submitイベントはform要素で発生します.すなわち、submitイベントオブジェクトのターゲットproperty値はform要素への参照値である.

  • form要素内の入力フィールドでenterキーを押すと、form要素内のsubmitボタンでクリックイベントが発生します.

  • 呼び出しform.submitメソッドは、フォームをサーバに送信することができる.form.submitメソッドは、主にフォームを動的に生成し、サーバに送信するために使用されます.submitイベントは発生しません.

  • form要素内の入力フィールドがフォーム検証で失敗した場合、formはコミットされないためsubmitイベントは発生せず、無効なイベントが発生します.
    • <!DOCTYPE html>
<html>
  <body>
    <form>
      <input required />
      <button>submit</button>
    </form>
  </body>
  <script>
    document.querySelector('form').onsubmit = e => {
      e.preventDefault();
      console.log(e.target); // submit 이벤트는 form 요소에서 발생
      console.log('form is submitted');
    };

    document.querySelector('form > input').oninvalid = e => {
      console.log(e.target); // invalid 이벤트는 폼 검증이 실패한 입력 필드에서 발생
      console.log('form is invalid');
    };
  </script>
</html>
  • HTMLFormElement: submit event
  • HTMLFormElement: invalid event
  • HTML 5フォームの検証
  • Why you should be using HTML5 form validation: a tour
    • フルスタックのオープンソース電子商取引の夢を追う
    JSON JBuilderの使用方法