-1

HTML5 検証に基づいてブラウザー検証エラー メッセージを表示できない理由を理解しようとしています。

マークアップに検証したいフィールドと、クリック時に起動するかどうかを知るためにその有効性を調査するリンクがあります。特に、これはフォーム内にあるわけではなく、HTML5 仕様を読んでも、それが問題かどうかはわかりません。確かに、フォーム外のフィールドに checkValidity メソッドを使用できるという事実は、検討する価値があることを示唆しています。

HTML

<input type="email" id="email" required="required">
<a id="link" href="some_external_link" target="_blank">Do the thing</a>

JavaScript/JQuery

$("#link").on("click", function(event) {
  var email = $('#email')[0];
  if (!email.checkValidity()) {
    event.preventDefault();
  }
});

これまでに見た動作から、無効な電子メール アドレスを入力してリンクをクリックしようとすると、(仕様に基づいて) 「単純なイベント」が発生することが予想されます。ブラウザのエラーメッセージ表示をフックする必要があることを理解してください。

ただし、代わりに検証メッセージは表示されません。検証は失敗し、リンクをたどることはできません。有効な電子メールを入力すると、その逆になります。イベントがどのように発生または処理されるかについて何か不足していますか?

フィールドの周りにフォームと送信ボタンを作成することを含む他の回答がありますが、これは私の最後の手段になりますが、それは目的の機能を得るために余分な無意味なノイズが多く、私が何の根本的な原因を理解したいのですか?見てます。

4

1 に答える 1

0

私が見る限り、フックできる外部イベントはありません。ブラウザーは、検証されたときに個々の要素から何も発行しませんが、フォームを処理するときに内部ですべての作業を行います。

reportValidity()いくつかの初期の W3C ドキュメントで呼び出されたメソッドがあり、Chromeで利用可能であり、 Firefox の可能な機能のリストにあり、まだ使用可能であることを意味するのに十分ではありませんが、これは検証エラーが表示されcheckValidity() ないことを指摘するのに役立ちましたユーザー自身に。

現時点でこの機能を取得したい場合は、コントロールをフォームでラップし、Javascript でのデフォルトの送信動作を抑制するか、ブラウザーのデフォルトの実装以外の方法で検証の失敗をユーザーに通知する必要があります。

于 2016-10-10T15:54:10.843 に答える