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 oben, unter oder an der rechten Seite eines Felds angezeigt werden.
- Anzeigen von Fehlermeldungen für mehrere Felder jederzeit.
- Anzeigen der Fehlermeldung unabhängig davon, ob ein Feld ausgewählt ist oder nicht.
Laden Sie vor dem Anpassen der Fehlermeldungen das angehängte Paket herunter und extrahieren Sie es (CustomErrorManager-1.0-SNAPSHOT.zip).
Herunterladen
Fügen Sie zum Anpassen der Fehlermeldungsposition für jedes Fehler- und Warnfeld den Tag
-
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 } },
Verwenden Sie das angehängte Paket, um die Fehlermeldungen für alle Felder gleichzeitig anzuzeigen. Verwenden Sie zum Anzeigen einer einzelnen Fehlermeldung das Standardprofil.
-
Ö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.
Standardmäßig verwenden HTML5-Formulare ein Standardprofil: http://
Geben Sie zum Anzeigen eines Formulars mit den angepassten Meldungen das Formular mit dem Fehlerprofil wieder: http://
Hinweis:
Mit dem angehängten Paket wird das Fehlerprofil installiert.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.