DokumentationAEM 6.5Användarhandbok

Anpassa felmeddelanden för HTML5-formulär customizing-error-messages-for-html-forms

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

I HTML5-formulär visas felmeddelandena och varningarna med fast position och utseende (teckensnitt och färg) utanför rutan, och endast ett fel visas.

I artikeln finns anvisningar för hur du anpassar felmeddelanden för HTML5-formulär så att du kan göra följande:

  • ändra utseendet och placeringen av felmeddelanden. Du kan göra så att ett fel visas högst upp, längst ned och till höger i ett fält.
  • visa felmeddelanden för flera fält vid en given tidpunkt.
  • visar felet oavsett om ett fält är markerat eller inte.

Anpassa felmeddelanden  customizing-error-messages-nbsp

Innan du anpassar felmeddelandena hämtar och extraherar du det bifogade paketet (CustomErrorManager-1.0-SNAPSHOT.zip).

När du har extraherat paketet öppnar du mappen CustomErrorManager-1.0-SNAPSHOT. Den innehåller mapparna jcr_root och META-INF. Dessa mappar innehåller de CSS- och JS-filer som behövs för att anpassa felmeddelandet.

Hämta fil

Anpassa felmeddelandenas placering  customizing-the-position-of-error-messages-nbsp

Om du vill anpassa felmeddelandets position lägger du till en <div> -taggen för varje fel- och varningsfält, placera <div> till vänster eller höger och tillämpa CSS-format på <div> -tagg. Detaljerade anvisningar finns i proceduren nedan:

  1. Navigera till CustomErrorManager-1.0-SNAPSHOToch öppna etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript mapp.

  2. Öppna customErrorManager.js fil för redigering. The markError -funktionen i filen accepterar följande parametrar:

    table 0-row-2 1-row-2 2-row-2 3-row-2
    jqWidget jqWidget är handtaget för en widget.
    msg innehåller felmeddelandet
    type anger om det är ett fel eller en varning

  3. Vid körningen visas felmeddelanden till höger om fältet. Använd följande kod om du vill att felmeddelandena ska visas överst.

    code language-javascript 
    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. Spara och stäng filen.

  5. Navigera till CustomErrorManager-1.0-SNAPSHOT och skapa ett arkiv med mapparna jcr_root och META-INF. Byt namn på arkivet till CustomErrorManager-1.0-SNAPSHOT.zip.

  6. Använd pakethanteraren för att överföra och installera paketet.

Visa felmeddelanden för flera fält  display-error-messages-for-multiple-fields-nbsp

Använd det bifogade paketet för att samtidigt visa felmeddelanden för alla fält. Om du vill visa ett enda felmeddelande använder du standardprofilen.

Anpassa utseendet på felmeddelanden.  customizing-the-appearance-of-error-messages-nbsp

  1. Gå till mappen etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css.

  2. Öppna filen sample.css för redigering. CSS-filen innehåller 2 id:n - #customError, #customWarning. Du kan använda dessa id:n för att ändra olika egenskaper som färg och teckenstorlek.

    Använd följande kod för att ändra teckenstorlek och färg för fel-/varningsmeddelanden.

    code language-css 
    #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. Spara och stäng filen.

  4. Navigera till mappen CustomErrorManager-1.0-SNAPSHOT och skapa ett arkiv med mapparna jcr_root och META-INF. Byt namn på arkivet till CustomErrorManager-1.0-SNAPSHOT.zip.

  5. Använd pakethanteraren för att överföra och installera paketet.

Rendera formuläret med den nya profilen.  render-the-form-with-the-new-profile-nbsp

HTML5-formulär har en standardprofil som standard: https://&lt;server&gt;/content/xfaforms/profiles/default.html?contentRoot=&lt;xdp location&gt;&template=&lt;name of the xdp&gt;

Om du vill visa ett formulär med anpassade felmeddelanden återger du formuläret med felprofilen: https://&lt;server&gt;/content/xfaforms/profiles/error.html?contentRoot=&lt;xdp location&gt;&template=&lt;name of the xdp&gt;

NOTE
Det bifogade paketet installerar felprofilen.
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2