私のアプリには複数のタブがあります。タブには入力フィールドがあり、これらのフィールドをクライアント側で検証したいと考えています。このために、required属性やpattern属性などの HTML5 属性を使用しようとしています。選択した最初のタブに空のフィールド (フィールドは必須) がある場合、エラー メッセージが表示されますがThe field is required、たとえば 3 番目のタブなどの他のタブに空のフィールドがあり、最初のタブが選択されている場合、エラーメッセージは表示されません。
質問 この状況で、HTML5 で検証を整理する方法はありますか?
でフォーム要素を隠していますdisplay: noneか? 要素が表示されていない場合、検証 UI はトリガーされません。
未処理の無効なコントロールで指定された要素の少なくとも 1 つの制約に関する問題をユーザーに報告します。ユーザー エージェントは、その要素のフォーカス手順を実行することで、プロセス内の要素の 1 つにフォーカスし、ドキュメントのスクロール位置を変更したり、要素にユーザーの注意を引くその他のアクションを実行したりできます。ユーザー エージェントは、複数の制約違反を報告する場合があります。ユーザー エージェントは、必要に応じて、関連する制約違反レポートを結合することができます (たとえば、グループ内の複数のラジオ ボタンが必須としてマークされている場合、1 つのエラーのみを報告する必要があります)。コントロールの 1 つがレンダリングされていない場合 (たとえば、hidden 属性が設定されている場合)、ユーザー エージェントはスクリプト エラーを報告することがあります。
この状況invalidでは、独自のスクリプトでイベントをリッスンし、適切なアクションを実行する必要があります。