すべてのフォームフィールドが必須であることをユーザーに通知します
フォームの作成にReactをしばらく使用していますが、いくつかの理由により、いくつかのインライン検証を行うことができません。自分で作成したインライン検証をまだ経験していないためです。 mいくつかの問題も発生していますが、別の方法を考えていますが、まずこのコミュニティに相談したいと思います。
これが私のシナリオです：
ページが読み込まれると、検証のためにフォームがユーザーに表示されます。すべてのフォームフィールドが必須です。すべてのフィールドに入力するまで、下の送信ボタンをクリックできません。
私の質問は、「すべてのフィールドが必須」であることをユーザーに通知する場合、それは良い習慣/代替手段ですか？または、インライン検証を備えたフォームライブラリを使用する必要がありますか？影響/長所と短所は何ですか？前もって感謝します。
トップメッセージ
上部のメッセージは、ユーザーに通知する優れた方法であり、エラー防止に向けて機能します。あなたが質問していることを理解しているように、しかしそれは検証に代わるものではありません。検証はまだ発生する必要があります。
アスタリスク
（赤）アスタリスクはユーザーによく知られています（慣例です）。ただし、フォームが大きい場合、すべてのアスタリスク（特に赤の場合）によってフォームが見苦しくなります。ほとんどの入力が必要で、一部のみがオプションである場合のこれに対する優れた代替策は、すべてのオプション入力のラベルに「（オプション）」を追加することです。
インライン検証
インライン検証は、入力がフォーカスを失ったときに入力を確認する電子メールアドレスなどの入力に最適です。 （JSのblur()関数）。
あなたの場合、ユーザーはそれらをスキップするだけなので、一部の入力がまったく選択されない（フォーカスを取得する）場合があります。これらをインラインで検証することはできません。
オプションは、入力がフォーカスを取得したときに、選択した入力の上にある入力が空であるかどうかを確認する場合があります。
しかし、ユーザーがフォームを上から下に常に記入するわけではないため、これは有効なオプションだとは思いません。ほとんどの人がそうしますが、全部ではありません。特にあなたがあなたの質問に表示した例の形で。ロール名とキーワードは、ユーザーが入力するのが難しい場合があります。たとえば、ユーザーが場所を入力するのが最も簡単であるため、最初に入力します。これにより、その上の3つの入力が点灯します。
そのため、残された唯一の方法は、送信ボタンがクリックされたときに検証をトリガーすることです。
フォームを処理するためにPHPアクションに送信する前に、Javascriptで個人的に検証します。これにより、ページがリロードされなかったり、ページを離れたりすることがなくなります。入力した情報がすべて失われることはありません。
つまり、メッセージ、アスタリスク、またはオプションのラベルと検証のような視覚的な手がかりの組み合わせが最善です。
allフィールドが必須の場合は、すべての横にアスタリスクを付ける必要はありません。すべてのフィールドが必要であることを伝えるメッセージをフォームの上部に配置するだけです。
[保存]をクリックした場合でも、フィールドの検証を行い、完了していないフィールドをレポートする必要があります。