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

HTML5 フォームのエラーメッセージをカスタマイズすることで、

  • エラーメッセージの外観および位置を変更できます。エラーの表示位置は、フィールドの上側、下側、または右側から選べます。
  • フォーカスされているフィールドのエラーメッセージとともに、他のフィールドのエラーメッセージを表示できます。
  • フィールドが選択されているかどうかに関わらず、エラーメッセージを表示できます。

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

エラーメッセージをカスタマイズする前に、添付のパッケージ (CustomErrorManager-1.0.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 the 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 * (1 / xfalib.ut.XfaUtil.prototype.formScaleFactor) - msgHeight + "px";                      // Assign the desired top position using pos.top. Here it is calculated for top of the field
                    if (type != "warning") {
                    if(!jqWidget.ref){
                    jqWidget.ref=$("<div id='customError'></div>").appendTo('body');                                                          //Adding the warning div if it is not present already
                    }
                    jqWidget.$css(jqWidget.ref.get(0), styles);                                                                                               // Applying the styles to the warning div
                    jqWidget.ref.text(msg).show();                                                                                                                  //Showing the warning message  
                    } else {
                    if(!jqWidget.ref){                                                                                                                                        //Adding the error  div if it is not present already
                    jqWidget.ref=$("<div id='customWarning'></div>").appendTo('body');
                    }
                    jqWidget.$css(jqWidget.ref.get(0), styles);                                                                                                  // Applying the styles to the error div
                    jqWidget.ref.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 フォームはデフォルトのプロファイル http://<サーバー>/content/xfaforms/profiles/default.html?contentRoot=<XDP のロケーション>&template=<XDP の名前> を使用しています。

カスタムエラーメッセージのついたフォームを表示するには、エラープロファイル http://<サーバー>/content/xfaforms/profiles/error.html?contentRoot=<XDP のロケーション>&template=<XDP の名前> でフォームをレンダリングします。

注意:

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

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー