[解決済み] setCustomValidityメッセージ/ツールチップをsubmitイベントなしで表示する方法
2022-01-28 13:04:46
質問
フォームの基本的な検証を使用して、電子メールの形式が正しいかどうかをチェックします。その後、データをAjaxで送信し、電子メールアドレスがすでに使用されているか、ユーザーが国/州を選択したか、セレクトボックスにデフォルト値が残っているかどうかをチェックします。
しかし、HTML5のフォーム検証を行うにはsubmitイベントが必要で、submitをクリックしたときに、基本的なフォーム検証に合格していればAjax操作が行われますが、その後結果が来たときに、インターフェースの一貫性のために同じブラウザのツールチップを使用したいと思います(見た目も気に入っています)。
何か特別なイベントがあるのか、あるいはsubmitイベントを発生させてもすぐに停止させるようなものがあるのか、わかりませんでしたが、表示させる方法はありますでしょうか。今現在、フィールドの上にマウスを置くと赤い縁とエラーメッセージが表示されるだけで、投稿ボタンを再度クリックするとツールチップが表示されます。
また、ネイティブツールチップがないブラウザ(私の場合はSafari)については、Webshims Libを使っていますが、ChromeやFirefoxと全く同じように動作します。
解決方法は?
と思ったら
.checkValidity()
を使えばいいのですが、これではUIが起動しません。(
カニース
)
のように聞こえます。
.reportValidity()
は、あなたが望むようにします。(
カニース
)
関連
-
[解決済み】TypeError: 'undefined'はオブジェクトではありません。
-
[解決済み】Uncaught ReferenceError。Reactが定義されていない
-
[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)
-
[解決済み】Jestが予期しないトークンに遭遇した
-
[解決済み】Syntax error: JavaScriptの不正なreturnステートメント
-
[解決済み】'useState' が定義されていない no-undef React
-
[解決済み】HTMLの最初の行に予期しないトークン<がある。
-
[解決済み] Uncaught (in promise) TypeError: フェッチに失敗してCorsエラー
-
[解決済み] ページを再読み込みせずにURLを変更するにはどうすればよいですか?
-
[解決済み】jQueryで送信せずにhtml5フォームの検証を強制する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】XMLHttpRequestモジュールが定義されていない/見つからない
-
[解決済み】Javascriptのコールバック関数がFirefoxで「Callback is not a function」というエラーを投げる
-
[解決済み】JavaScript "Uncaught TypeError: object is not a function" 連想性の質問
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み】JavaScriptのボタンonclickが機能しない
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】Uncaught ReferenceError。Firebase は定義されていません。
-
[解決済み】SyntaxError: 期待された式が、'<'を得た。
-
[解決済み】未定義のプロパティ 'forEach' を読み取ることができない
-
[解決済み】jQueryで送信せずにhtml5フォームの検証を強制する方法