デフォルトの HTML5 フォームでは、エラーメッセージと警告の位置と外観(フォントや色)は固定されており、エラーは選択したフィールドに 1 つだけ表示されます。
この記事では、HTML5 フォームのエラーメッセージをカスタマイズし、
エラーメッセージをカスタマイズする前に、添付のパッケージ(CustomErrorManager-1.0-SNAPSHOT.zip)をダウンロードして解凍します。
パッケージの抽出後、CustomErrorManager-1.0-SNAPSHOT フォルダーを開きます。jcr_root および META-INF フォルダーが含まれています。これらのフォルダーには、エラーメッセージのカスタマイズに必要な CSS および JS ファイルが含まれています。
エラーメッセージの位置をカスタマイズするには、各エラーおよび警告フィールドごとに <div> タグを追加し、<div> タグを左側または右側に配置して <div> タグに CSS スタイルを適用します。詳しくは、次の手順を参照してください。
CustomErrorManager-1.0-SNAPSHOT
フォルダーに移動し、etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript
フォルダーを開きます。
customErrorManager.js
ファイルを編集用として開きます。ファイル内の markError
関数は、次のパラメーターを受け付けます。
jqWidget | ウィジェットのハンドル |
msg | エラーメッセージを格納します |
type | エラーか警告かを表します |
初期設定での実装では、エラーメッセージはフィールドの右側に表示されます。エラーメッセージを上側に表示するには、次のコードを使用します。
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
}
},
ファイルを保存して閉じます。
CustomErrorManager-1.0-SNAPSHOT
フォルダーに移動し、jcr_root フォルダーと META-INF フォルダーのアーカイブを作成します。アーカイブの名前を CustomErrorManager-1.0-SNAPSHOT.zip に変更します。
パッケージマネージャーを使用し、パッケージをアップロードしてインストールします。
すべてのフィールドのエラーメッセージを同時に表示するには、添付されているパッケージを使用します。エラーメッセージを単独で表示するには、デフォルトのプロファイルを使用します。
etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css フォルダーに移動します。
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.
ファイルを保存して閉じます。
CustomErrorManager-1.0-SNAPSHOT フォルダーに移動し、jcr_root および META-INF フォルダーのアーカイブを作成します。アーカイブの名前を CustomErrorManager-1.0-SNAPSHOT.zip に変更します。
パッケージマネージャーを使用し、パッケージをアップロードしてインストールします。
初期設定では、HTML5 フォームは次のデフォルトのプロファイルを使用しています。https://<server>/content/xfaforms/profiles/default.html?contentRoot=<XDP の場所>&template=<XDP の名前>
カスタムのエラーメッセージでフォームを表示するには、次のエラープロファイルでフォームをレンダリングします。https://<server>/content/xfaforms/profiles/error.html?contentRoot=<XDP の場所>&template=<XDP の名前>
エラープロファイルは、添付されているパッケージによりインストールされます。