7

HTML5 フォーム検証を使用する場合、フォームに無効な入力値があると、そのフォームの送信が停止します。ユーザーが失敗したフォーム送信を試みたことをどのように検出できますか? 検証の失敗によって送信が停止された場合、フォームのonsubmitハンドラーは起動しません。

現在、送信ボタンのイベントをリッスンしてkeypress、click送信の試みを検出しています。失敗したフォーム送信を検出するより良い方法はありますか?

4

3 に答える 3

3

これを回避する簡単な方法は、フォームの各入力にイベント リスナーを追加して、いつ送信が妨げられたかを確認することです。「無効な」イベントは、必要なすべてを行う必要があります。

例

Array.prototype.slice.call(document.querySelectorAll("[required]")).forEach(function(input){
                input.addEventListener('invalid',function(e){
                    //Your input is invalid!    
                })
            });

詳細はこちら http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/

于 2015-01-28T08:43:27.737 に答える
0

プロパティを使用することをお勧めしますnoValidate。デフォルトの検証をオフにして、onsubmitメソッド内で手動で実行できます

var form = document.getElementById("myForm");
form.noValidate = true; // turn off default validation

form.onsubmit = function(e) {
  e.preventDefault(); // preventing default behaviour
  this.reportValidity(); // run native validation manually

  // runs default behaviour (submitting) in case of validation success
  if (this.checkValidity()) return form.submit();

  alert('invalid'); // your code goes here
}

ここで確認できます：https://jsfiddle.net/tiulus_desiderio/Laon29f3/

于 2018-02-05T15:52:47.410 に答える