Show Menu
THEMEN×

Anpassen von Fehlermeldungen für HTML5-Formulare

In den HTML5-Formularen haben die Fehlermeldungen und Warnungen standardmäßig eine feste Position und ein festgelegtes Erscheinungsbild (Schriftart und Farbe). Der Fehler wird nur für ein ausgewähltes Feld angezeigt und es wird nur ein Fehler angezeigt.
Der Artikel stellt die Schritte bereit, um HTML5-Fehlermeldung anzupassen um,
  • dass das Erscheinungsbild und die Position der Fehlermeldungen geändert werden. Die Fehlermeldung können oberhalb, unterhalb oder an der rechten Seite eines Felds angezeigt werden.
  • Anzeigen von Fehlermeldungen für mehrere Felder jederzeit.
  • den Fehler unabhängig davon anzeigen, ob ein Feld ausgewählt ist oder nicht.

Anpassen von Fehlermeldungen

Laden Sie vor dem Anpassen der Fehlermeldungen das angehängte Paket herunter und extrahieren Sie es (CustomErrorManager-1.0-SNAPSHOT.zip).
Nachdem Sie das Paket entpackt haben, öffnen Sie den Ordner CustomErrorManager-1.0-SNAPSHOT. Er enthält die Ordner jcr_root und META-INF. Diese Ordner enthalten die CSS- und .JS-Dateien, die zum Anpassen der Fehlermeldung erforderlich sind.

Anpassen der Position der Fehlermeldungen

Fügen Sie zum Anpassen der Fehlermeldungsposition für jedes Fehler- und Warnfeld den Tag <div> hinzu. Positionieren Sie den Tag <div> auf der linken oder rechten Seite und wenden Sie auf den Tag <div> CSS-Stile an. Ausführliche Anweisungen finden Sie in unten aufgeführtem Verfahren:
  1. Navigate to the CustomErrorManager-1.0-SNAPSHOT folder and open the etc\clientlibs\mf-custom-error-manager\CustomErrorManager\javascript folder.
  2. Open the customErrorManager.js file for editing. The markError function in the file accepts the following parameters:
    jqWidget
    jqWidget ist der Griff für das Widget.
    msg
    enthält die Fehlermeldung
    type
    gibt an, ob es sich um einen Fehler oder eine Warnung handelt
  3. Bei der standardmäßigen Implementierung werden Fehlermeldungen auf der rechten Seite des Felds angezeigt. Verwenden Sie folgenden Code, um Fehlermeldungen oben anzuzeigen.
    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. Speichern und schließen Sie die Datei.
  5. Navigieren Sie zum Ordner CustomErrorManager-1.0-SNAPSHOT und erstellen Sie ein Archiv der Ordner jcr_root und META-INF. Benennen Sie das Archiv in CustomErrorManager-1.0-SNAPSHOT.zip um.
  6. Verwenden Sie den Package Manager, um das Paket herunterzuladen und zu installieren.

Anzeigen von Fehlermeldungen für mehrere Felder

Verwenden Sie das angehängte Paket, um die Fehlermeldungen für alle Felder gleichzeitig anzuzeigen. Verwenden Sie zum Anzeigen einer einzelnen Fehlermeldung das Standardprofil.

Anpassen des Erscheinungsbilds der Fehlermeldungen.

  1. Navigieren Sie zum Ordner etc\clientlibs\mf-custom-error-manager\CustomErrorManager\css.
  2. Öffnen Sie die Datei sample.css zur Bearbeitung. Die CSS-Datei enthält 2 IDs: #customError und #customWarning. Sie können diese IDs verwenden, um andere Eigenschaften zu ändern, z. B. Farbe, Schriftgrad usw.
    Verwenden Sie den folgenden Code, um Schriftgröße und Farbe der Fehler-/Warnmeldungen zu ändern.
    #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. Speichern und schließen Sie die Datei.
  4. Navigieren Sie zum Ordner CustomErrorManager-1.0-SNAPSHOT und erstellen Sie ein Archiv der Ordner jcr_root und META-INF. Benennen Sie das Archiv in CustomErrorManager-1.0-SNAPSHOT.zip um.
  5. Verwenden Sie den Package Manager, um das Paket herunterzuladen und zu installieren.

Geben Sie das Formular mit dem neuen Profil wieder. 

Standardmäßig verwenden HTML5-Formulare ein Standardprofil: https://<server>/content/xfaforms/profiles/default.html?contentRoot=<xdp location>&template=<name of the xdp>
Um ein Formular mit den benutzerdefinierten Fehlermeldungen anzuzeigen, rendern Sie das Formular mit dem Fehlerprofil: https://<server>/content/xfaforms/profiles/error.html?contentRoot=<xdp location>&template=<name of the xdp>
Mit dem angehängten Paket wird das Fehlerprofil installiert.