自訂HTML5表單的錯誤訊息

在HTML5表單中,錯誤訊息和警告會立即顯示固定的位置和外觀(字型和顏色),錯誤只會針對選取的欄位而顯示,並且只會顯示一個錯誤。

文章提供自訂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 jqWidget是widget的控點。
    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檔案包含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.
    
  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=<xdp的名稱>

若要檢視含有自訂錯誤訊息的表單,請以錯誤設定檔呈現表單:https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<xdp的名稱>

注意

附加的軟體包安裝錯誤配置檔案。

本頁內容