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

デフォルトの HTML5 フォームでは、エラーメッセージと警告の位置と外観（フォントや色）は固定されており、エラーは選択したフィールドに 1 つだけ表示されます。

この記事では、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 の場所>&template=<XDP の名前>

カスタムのエラーメッセージでフォームを表示するには、次のエラープロファイルでフォームをレンダリングします。https://<server>/content/xfaforms/profiles/error.html?contentRoot=<XDP の場所>&template=<XDP の名前>

Business.Adobe.com リソース

Multichannel Communication Content Intelligence Theme Editor Web Content Management Customer Experience Management Headless Cms