HTML5 フォームのエラーメッセージのカスタマイズ

初期設定の状態の HTML5 フォームでは、エラーメッセージおよび警告の位置と外観(フォントおよび色)は固定されており、エラーは選択されたフィールドにのみひとつだけ表示されます。

この記事では、HTML5フォームのエラーメッセージをカスタマイズして、

  • エラーメッセージの外観および位置を変更できます。任意のフィールドの上、下、右にエラーを表示させることができます。
  • 複数のフィールドのエラーメッセージをいつでも表示できます。
  • フィールドが選択されているかどうかに関係なく、エラーを表示します。

エラーメッセージのカスタマイズ

エラーメッセージをカスタマイズする前に、添付のパッケージ (CustomErrorManager-1.0-SNAPSHOT.zip) をダウンロードして抽出します。

パッケージの抽出後、CustomErrorManager-1.0-SNAPSHOT フォルダーを開きます。jcr_root および META-INF フォルダーが含まれています。これらのフォルダーには、エラーメッセージのカスタマイズに必要な CSS および JS ファイルが含まれています。

ファイルを入手

エラーメッセージの位置のカスタマイズ

エラーメッセージの位置をカスタマイズするには、各エラーおよび警告フィールドごとに <div> タグを追加し、<div> タグを左側または右側に配置して <div> タグに CSS スタイルを適用します。詳しくは、次の手順を参照してください。

  1. CustomErrorManager-1.0-SNAPSHOTフォルダーに移動し、etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascriptフォルダーを開きます。

  2. customErrorManager.jsファイルを開いて編集します。 ファイル内のmarkError関数は次のパラメーターを受け付けます。

    jqWidget ウィジェットのハンドル
    msg エラーメッセージが含まれています
    type エラーか警告かを表します
  3. 初期設定での実装では、エラーメッセージはフィールドの右側に表示されます。エラーメッセージを上側に表示するには、次のコードを使用します。

    markError: function (jqWidget, msg, type) {
                var element = jqWidget.element,                                //Gives the div containing widget
                    pos = $(element).offset(),                          //Calculates the position of the div in the view port
                                                                    msgHeight = xfalib.view.util.TextMetrics.measureExtent(msg).height + 5;  //Calculating the height of the Error Message
                    styles = {};
                    styles.left = pos.left + "px";         // Assign the desired left position using pos.left. Here it is calculated for exact left of the field
                    styles.top = pos.top - msgHeight + "px";  // Assign the desired top position using pos.top. Here it is calculated for top of the field
                if (type != "warning") {
                    if(!jqWidget.errorDiv){
                                                                                    //Adding the warning div if it is not present already
                        jqWidget.errorDiv=$("<div id='customError'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the warning div
                    jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
                } else {
                    if(!jqWidget.errorDiv){
                                                                                    //Adding the error div if it is not present already
                        jqWidget.errorDiv=$("<div id='customWarning'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.errorDiv.get(0), styles); // Applying the styles to the error div
                    jqWidget.errorDiv.text(msg).show();                     //Showing the warning message
                }
    
            },
    
  4. ファイルを保存して閉じます。

  5. CustomErrorManager-1.0-SNAPSHOT フォルダーに移動し、jcr_root および META-INF フォルダーのアーカイブを作成します。アーカイブの名前を CustomErrorManager-1.0-SNAPSHOT.zip に変更します。

  6. パッケージマネージャーを使ってパッケージをアップロードし、インストールします。

複数のフィールドのエラーメッセージの表示

すべてのフィールドのエラーメッセージを同時に表示するには、添付されているパッケージを使用します。エラーメッセージを単独で表示するには、デフォルトのプロファイルを使用します。

エラーメッセージの外観のカスタマイズ

  1. etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css フォルダーに移動します。

  2. sample.css ファイルを開いて編集します。CSS ファイルには、#customError と #customWarning の 2 つの ID が含まれています。これらの ID を使用して、色やフォントサイズなど、さまざまなプロパティを変更することができます。

    エラー/警告メッセージのフォントサイズおよび色を変更するには、次のコードを使用します。

    #customError {
    color: #0000FF; // it changes the color of Error Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 24px;  // it changes the font size of Error Message
    z-index:5;
    }
    
    #customWarning {
    color: #00FF00;  // it changes the color of Warning Message
    display:none;
    position:absolute;
    opacity:0.85;
    font-size: 18px;   // it changes the font size of Warning Message
    z-index:5;
    }
    
    Save the changes.
    
  3. ファイルを保存して閉じます。

  4. CustomErrorManager-1.0-SNAPSHOT フォルダーに移動し、jcr_root および META-INF フォルダーのアーカイブを作成します。アーカイブの名前を CustomErrorManager-1.0-SNAPSHOT.zip に変更します。

  5. パッケージマネージャーを使ってパッケージをアップロードし、インストールします。

新しいプロファイルでフォームをレンダリングします。 

初期設定では、html5フォームは次のデフォルトのプロファイルを使用します。https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<name of the xdp>

カスタムエラーメッセージを使用してフォームを表示するには、次のエラープロファイルを使用してフォームをレンダリングします。https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<name of the xdp>

メモ

エラープロファイルは、添付されているパッケージによりインストールされます。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now