HTML5 양식에 대한 오류 메시지 사용자 지정

HTML5 양식에서 즉시 오류 메시지와 경고에는 고정된 위치와 모양(글꼴과 색상)이 있고, 선택한 필드에 대해서만 오류가 표시되고 하나의 오류만 표시됩니다.

이 문서에서는 HTML5 양식 오류 메시지를

• 오류 메시지의 모양과 위치를 변경합니다. 필드의 위쪽, 아래쪽 및 오른쪽에 표시되는 오류를 만들 수 있습니다.
• 지정된 시간에 여러 필드에 대한 오류 메시지를 표시합니다.
• 선택한 필드에 관계없이 오류를 표시합니다.

오류 메시지 사용자 지정 

오류 메시지를 사용자 지정하기 전에 첨부된 패키지(CustomErrorManager-1.0-SNAPSHOT.zip)를 다운로드하여 추출합니다.

패키지를 추출한 후 CustomErrorManager-1.0-SNAPSHOT 폴더를 엽니다. jcr_root 및 META-INF 폴더가 포함되어 있습니다. 이러한 폴더에는 오류 메시지를 사용자 지정하는 데 필요한 CSS 및 .JS 파일이 포함되어 있습니다.

파일 가져오기

오류 메시지 위치 사용자 지정 

오류 메시지의 위치를 사용자 지정하려면 <div> 태그에 다음 코드를 배치하십시오 <div> 태그를 왼쪽 또는 오른쪽으로 지정하고 <div> 태그에 가깝게 포함했습니다. 자세한 단계는 아래 나열된 절차를 참조하십시오.

1. 로 이동합니다 CustomErrorManager-1.0-SNAPSHOT폴더 및 열기 etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript 폴더를 입력합니다.

2. 를 엽니다. customErrorManager.js 편집할 파일입니다. 다음 markError 파일의 함수는 다음 매개 변수를 허용합니다.

   jqWidget	jqWidget 은 위젯의 핸들입니다.
   msg	오류 메시지 포함
   유형	오류 또는 경고 표시

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 folder 로 이동합니다.

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="">

Business.Adobe.com 리소스

Multichannel Communication Ecommerce Integrations Automated Onboarding Embedded Charts Customer Experience Management Content Management System