Show Menu
主题×

自定义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. Open the customErrorManager.js file for editing. 文件 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文件包含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的名称>
附加的软件包会安装错误配置文件。