Lösen Sie den Konflikt zwischen der Ladeanimation der Schaltfläche „Senden' und der HTML5-Formularvalidierung

In diesem Artikel wird das Problem erörtert, das die Überprüfung der erforderlichen HTML5 -Attribute beim Hinzufügen von Ladeanimationen zur Sendel -Schaltfläche während der Einreichung von Webformularen verursachen kann. Durch die Analyse der Hauptursache des Problems schlagen wir eine Lösung vor: Übertragen Sie das JavaScript -Ereignis vom Klickereignis der Schaltfläche auf das Submit -Ereignis des Formulars, um sicherzustellen, dass der Mechanismus des nativen Formularverifizierungsmechanismus bevorzugt wird, um eine harmonische Koexistenz zwischen Ladeanimation und HTML5 -Überprüfung und Verbesserung der Benutzererfahrung zu erreichen.

In modernen Webanwendungen, um die Benutzererfahrung zu verbessern, fügen wir häufig Ladeanimationen zum Sendentast hinzu, wenn Sie das Formular senden, um den Benutzer klar darüber zu informieren, dass der Hintergrundvorgang im Gange ist. Ein häufiges Problem ist jedoch, dass bei einigen Implementierungen eine solche Addition von Ladeanimationen versehentlich die validierung des nativen HTML5 -Formulars deaktivieren kann (z. B. erforderliche Attribute). Dieser Artikel wird dieses Problem eingehend analysieren und eine robuste Lösung bieten.

Problembeschreibung und Ursachenanalyse

Stellen Sie sich ein Szenario vor, in dem Sie über ein Formular mit den erforderlichen Feldern verfügen und sofort eine Ladeanimation anzeigen und sich selbst deaktivieren möchten, nachdem der Benutzer auf die Schaltfläche Senden auf die Senden -Schaltfläche geklickt hat, um doppelte Einreichungen zu verhindern. Die erste Implementierung könnte so aussehen:

Beispiel für erste (Problem) Code Beispiel:

speichern

<script> $ (Dokument) .Ready (function () { $ ("#laden"). Click (function () {// Hören Sie die Schaltfläche Klicken Sie an. // Ladenanimation $ (this) .html ( `<i class =" Spinner-Border Spinner-Border-SM MB-1 "> Ladens" ); $ ("#speichern"). subled (); // Formular manuell einreichen}); }); </script>

In dieser Implementierung wird der JavaScript -Code sofort ausgeführt, wenn der Benutzer mit der ID -Lade auf die Schaltfläche Senden von ID klickt:

1. Taste deaktivieren.
2. Fügen Sie Ladeanimationen für die Taste hinzu.
3. Manuell auslösen Formularübertragung über $ ("#Save"). Subled ();

Der Schlüssel zum Problem liegt im dritten Schritt. Wenn JavaScript ein Formular programmgesteuert über die Methode von Subschritt () einreicht, überspringt der Browser den nativen Formularverifizierungsmechanismus von HTML5. Dies bedeutet, dass selbst wenn das Kennworteingabefeld über die erforderliche Eigenschaft verfügt und leer ist, der Browser den Standard "Bitte füllen Sie diese Feld aus" an, sondern versucht stattdessen direkt, das Formular einzureichen, was zu einer ungültigen Überprüfung führt.

Lösung: Hören Sie sich das Einreichungsereignis des Formulars an

Der Kern der Lösung dieses Problems besteht darin, dem Browser die Möglichkeit zu geben, seine native HTML5 -Formularvalidierung durchzuführen. Das Formular wird nur wirklich versucht, zu reichen, wenn alle erforderlichen Felder ausgefüllt wurden und andere HTML5 -Validierungsregeln (z. B. Typ = "E -Mail") bestanden werden. Zu diesem Zeitpunkt treten wir ein und ändern den Schaltflächenstatus erneut.

Die richtige Art und Weise ist das Anhören des Sendenereignisses des Formulars , nicht auf das Klickereignis der Schaltfläche. Wenn der Benutzer auf die Schaltfläche von Typ = "Senden" klickt, führt der Browser zunächst die HTML5 -Überprüfung durch. Wenn die Überprüfung verabschiedet wird, wird das Submit -Ereignis ausgelöst. Wenn die Überprüfung fehlschlägt, wird das Subjektereignis nicht ausgelöst, und der Browser zeigt die entsprechende Überprüfungsfehleraufforderung an.

Beispiel für ein optimiertes Code:

speichern

<script> $ (Dokument) .Ready (function () { $ ("#speichern"). Senden (Funktion (e) {// Hören Sie sich das Einreichungsereignis des Formulars an // Wenn die Formularüberprüfung verabschiedet wird und Sie versuchen, die folgenden Vorgänge auszuführen // Die Einreichungsschaltfläche $ (&#39;#last&#39;). Prop ("deaktiviert", true); // Animation für die Schaltfläche $ (&#39;#laden&#39;). `<i class =" Spinner-Border Spinner-Border-SM MB-1 "> Ladens" ); // Hinweis: Es ist nicht erforderlich, $ $ ("#speichern") zu rufen. Submit (); Hier, weil das Ereignis selbst eine Formulareinreichung ist}); }); </script>

Durch Ändern von Ereignishörern von $ ("#laden"). Click () auf $ ("#speichern"). Subjekt () haben wir den folgenden Vorgang sichergestellt:

1. Der Benutzer klickt auf die Schaltfläche Senden.
2. Der Browser führt HTML5 -Formularüberprüfung durch.
3. Wenn die Überprüfung fehlschlägt, zeigt der Browser eine Fehlermeldung an, das Sendenereignis wird nicht ausgelöst und der Schaltflächenstatus bleibt unverändert.
4. Wenn die Überprüfung erfolgreich ist, wird das Submit -Ereignis ausgelöst.
5. Der Event -Handler senden aus, deaktiviert die Schaltfläche und fügt das Laden von Animationen hinzu.
6. Das Formular wird normal eingereicht.

Auf diese Weise kann das erforderliche Attribut von HTML5 normal funktionieren, und die Schaltfläche Senden kann auch die Ladeanimation nach der Übergabe der Formularüberprüfung anzeigen.

Notizen und Best Practices

• Vermeiden Sie programmatische Einreichungen: Versuchen Sie, die Verwendung von JavaScript -Formular zu vermeiden.
• Benutzererfahrung: Selbst wenn das Laden von Animationen verwendet wird, stellen Sie sicher, dass die Schaltfläche bei Ausfall der AJAX-Anforderung erneut aktiviert und die Ladeanimation entfernt wird, damit der Benutzer die Eingabe erneut versuchen oder ändern kann.
• Verhindern Sie doppelte Beiträge: Deaktivieren der Einreichungsschaltfläche ist eine effektive Möglichkeit, um zu verhindern, dass Benutzer mehrmals auf Einreichungen klicken, während Sie auf eine Antwort warten. In Kombination mit dem Laden von Animationen kann die Nachricht "Bitte warten" besser an Benutzer übermittelt werden.
• Progressive Verbesserung: Die HTML5-Formüberprüfung ist die erste Verteidigungslinie für die Front-End-Überprüfung. JavaScript kann zur komplexeren benutzerdefinierten Überprüfung oder zur Verbesserung der Benutzererfahrung nach der nativen Überprüfung verwendet werden.
• CSS-Framework-Integration: Wenn Sie CSS-Frameworks wie Bootstrap verwenden, sind die Ladeanimationen (z. B. Spinner-Borre) normalerweise so konzipiert, dass sie einfach in Schaltflächen integriert werden können.

Zusammenfassen

In der Webentwicklung ist das Ausgleich der Benutzererfahrung und der funktionalen Implementierung von entscheidender Bedeutung. Es ist eine gute Praxis, der Taste Senden -Subjektlastanimationen hinzuzufügen. Es muss jedoch angemerkt werden, dass die Implementierung nicht mit dem nativen Formularüberprüfungsmechanismus von HTML5 in Konflikt stehen kann. Durch die Übertragung von Ereignishörern von Button Click -Ereignissen, um Ereignisse einzusenden, können wir sicherstellen, dass zuerst die native Überprüfung durchgeführt wird, wodurch die harmonische Koexistenz zwischen dem Laden von Animationen und den erforderlichen HTML5 -Attributen erreicht wird und eine robustere und freundlichere Benutzeroberfläche bietet. Dieser Ansatz löst nicht nur spezifische Probleme, sondern spiegelt auch eine bewährte Verarbeitung der Webform wider.

Das obige ist der detaillierte Inhalt vonLösen Sie den Konflikt zwischen der Ladeanimation der Schaltfläche „Senden' und der HTML5-Formularvalidierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!