1

現在取り組んでいる申請フォームが送信された後、フィールドが必須であることを示す必要があります。現在、以下に示すように、画面の上部に不足しているフィールドのリストを表示できます。

ここに画像の説明を入力

これらのエラー メッセージは現在 Web API から送り返されており、AddModelErrors メソッドを介して ModelState に追加されています。これを行うために使用しているコードを以下に示します。

if (model.ApplicationValidations != null)
        {
            foreach (var item in model.ApplicationValidations.Select((validationMessage) => new {validationMessage}))
            {
                if (item.validationMessage.URL == "Apply Personal Details")
                {
                    ModelState.AddModelError("required fields", item.validationMessage.FieldName + " is required");
                }
            }
        }

私が取り組んだ同様のフォームでは、必須フィールドの横に赤いアスタリスクが最初に表示されます。

ここに画像の説明を入力

フォームが送信されると、以下に示すように、データが含まれていないフィールドやデータの形式が正しくないフィールドがピンク色で強調表示されます。

ここに画像の説明を入力

モデルエラーが表示されているときにのみ表示するためにフィールドの強調表示が必要です。現在、ユーザーが次のセクションに移動すると、フォームはデータを保存します。これがフォームが最終的に送信されたときにのみ発生する場合、検証は必要ありません。 .

これをどのように実装できるかについて誰かアイデアがありますか?

事前にアドバイスをありがとう

4

1 に答える 1

1

Javascript を使用して、Web API 呼び出しから返されたエラー データに基づいて、DOM 要素で HTML5 "setCustomValidity()" を呼び出すことができます。HTML5 検証の詳細については、 HTML5 制約検証に関するこの記事を参照してください。

古いブラウザーをサポートするには、 HF5 などのポリフィルを確認できます。

于 2013-08-29T09:42:00.897 に答える