HTML5 양식에서는 기본적으로 오류 메시지와 경고의 위치와 모양(글꼴과 색상)이 고정되어 있으며 선택한 필드에 대해서만 오류가 표시되고 하나의 오류만 표시됩니다.
이 문서는에 대한 HTML 5 양식 오류 메시지를 사용자 지정하는 단계를 제공합니다.
오류 메시지를 사용자 지정하기 전에 첨부된 패키지(CustomErrorManager-1.0-SNAPSHOT.zip)를 다운로드하여 추출하십시오.
패키지를 추출한 후 CustomErrorManager-1.0-SNAPSHOT 폴더를 엽니다. 여기에는 jcr_root 및 META-INF 폴더가 포함되어 있습니다. 이러한 폴더에는 오류 메시지를 사용자 지정하는 데 필요한 CSS 및 .JS 파일이 포함되어 있습니다.
오류 메시지의 위치를 사용자 지정하려면 다음을 추가합니다. <div> 각 오류 및 경고 필드에 태그를 지정하고 <div> 왼쪽 또는 오른쪽에 태그를 지정하고 <div> 태그에 가깝게 배치하십시오. 자세한 단계는 아래 절차를 참조하십시오.
다음 위치로 이동 CustomErrorManager-1.0-SNAPSHOT
폴더를 만들고 etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript
폴더를 삭제합니다.
를 엽니다. customErrorManager.js
편집할 파일입니다. 다음 markError
파일의 함수는 다음 매개 변수를 허용합니다.
jqWidget | jqWidget은 위젯에 대한 핸들입니다. |
msg | 오류 메시지 포함 |
유형 | 오류인지 또는 경고인지를 나타냅니다. |
기본 제공 구현 시 오류 메시지가 필드의 오른쪽에 나타납니다. 오류 메시지가 맨 위에 표시되도록 하려면 다음 코드를 사용하십시오.
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 파일에는 2개의 ID(#customError)가 #customWarning. 이러한 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 location="">템플릿(&t)=<name of="" the="" xdp="">
사용자 지정 오류 메시지가 있는 양식을 보려면 다음 오류 프로필이 있는 양식을 렌더링합니다. https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location="">템플릿(&t)=<name of="" the="" xdp="">
첨부된 패키지는 오류 프로필을 설치합니다.