1. ホーム
  2. javascript

[解決済み] setCustomValidityメッセージ/ツールチップをsubmitイベントなしで表示する方法

2022-01-28 13:04:46

質問

フォームの基本的な検証を使用して、電子メールの形式が正しいかどうかをチェックします。その後、データをAjaxで送信し、電子メールアドレスがすでに使用されているか、ユーザーが国/州を選択したか、セレクトボックスにデフォルト値が残っているかどうかをチェックします。

しかし、HTML5のフォーム検証を行うにはsubmitイベントが必要で、submitをクリックしたときに、基本的なフォーム検証に合格していればAjax操作が行われますが、その後結果が来たときに、インターフェースの一貫性のために同じブラウザのツールチップを使用したいと思います(見た目も気に入っています)。

何か特別なイベントがあるのか、あるいはsubmitイベントを発生させてもすぐに停止させるようなものがあるのか、わかりませんでしたが、表示させる方法はありますでしょうか。今現在、フィールドの上にマウスを置くと赤い縁とエラーメッセージが表示されるだけで、投稿ボタンを再度クリックするとツールチップが表示されます。

また、ネイティブツールチップがないブラウザ(私の場合はSafari)については、Webshims Libを使っていますが、ChromeやFirefoxと全く同じように動作します。

解決方法は?

と思ったら .checkValidity() を使えばいいのですが、これではUIが起動しません。( カニース )

のように聞こえます。 .reportValidity() は、あなたが望むようにします。( カニース )