自定义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的句柄。
    ms 包含错误消息
    类型 表示是错误还是警告
  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名称>

注意

附加的包会安装错误用户档案。

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now