HTML5 フォームを送信しようとすると、1 つ以上の必須フィールドに値がない場合、またはその他のエラー (タイプまたは長さの不一致) が発生した場合、フォームの送信が妨げられます。UI が更新され、無効なフィールドが強調表示され、最初の無効なフィールドがフォーカスされます。さらに、最初の無効なフィールドにバルーン/バブルが添付され、エラー メッセージが表示されます。
ここで、Ajax フォームの場合は、Ajax 呼び出しをディスパッチする前に myForm.checkValidity() を呼び出してエラーを確認します。ただし、checkValidity() を呼び出しても、無効なフィールドが強調表示され、吹き出しが付いている UI には影響しません。
検証のためにブラウザーのネイティブ動作を呼び出す方法はありますか?これにより、強調表示されフォーカスされた無効なフィールドと共にバルーンを確認できますか?
実際のフォーム送信をトリガーするだけです - http://jsfiddle.net/tj_vantoll/ZN29S/。
実際のフォーム送信が実行さcheckValidityれ、バブル エラーが表示invalidされ、必要に応じてイベント ハンドラが呼び出されます。
フォームが実際に送信されないようにするには、デフォルト アクションを防止するsubmitイベント ハンドラーをにアタッチしてから<form>、AJAX 呼び出しを実行する必要があります。
これが機能するのsubmitは、フォームがすべての制約を満たさない限り (つまり、有効なデータがない場合)、イベントが発生しないためです。したがって、明示的な呼び出しcheckValidityは必要ありません。
コメントに対処するために (11/7/12) を編集します。
この場合の実際のフォーム送信とは、単に送信ボタンで行われた非 AJAX 送信を指していたにすぎません。ネイティブ バブルを表示し、フォーカスを適切なフォーム要素に変更するには、これが唯一の方法です。送信ボタンがない場合は、非表示のボタンを作成し、それを使用して送信をトリガーできます。それはまだ動作します。
このアプローチは理想的とは言えませんが、サポートしているすべてのブラウザで機能します。呼び出しではなくこのハックが使用される唯一の理由は、ネイティブ検証をトリガーしないform.submit()ためです。form.submit()ここでの問題は、検証をトリガーする API がないことではなく、呼び出しform.submit()がないことです。仕様では、 「ユーザー エージェントがフォーム要素フォームの制約を静的に検証する必要がある」場合は常に、制約の検証を実行する必要があると述べています。通話が適用されない理由がわかりません。form.submit()
checkValidityDOES は、ネイティブ フォームの送信と同じアルゴリズムを実行することに注意してください。したがって、デフォルトのバブルを自由にオフにして、独自のバブルを実装できます。たとえば、このようなものです。
2012年から時は流れ、今ではreportValidity()方法があります。
この
HTMLFormElement.reportValidity()メソッドはtrue、要素の子コントロールが検証制約を満たす場合に戻ります。が返されると、無効な子ごとfalseにキャンセル可能なイベントが発生し、検証の問題がユーザーに報告されます。invalid
詳細については MDN を参照してください。
これは、Chrome (40 以上)、Edge (17 以上)、Firefox (49 以上)、Opera、Safari では機能しますが、IE では機能しません。