Probleme und Lösungen, die bei der Verwendung der erforderlichen HTML5-Eingaben auftreten

Fehler beim Ausblenden der Eingabe beim Absenden des Formulars

Wenn das Formular gesendet wird, werden einige Eingabe-Tags ausgeblendet und während des Formularüberprüfungsprozesses wird die Fehlermeldung An invalid form control with name='' is not focusable angezeigt.

Das Problem, auf das ich gestoßen bin, besteht zwar darin, dass mein Eingabe-Tag überhaupt kein erforderliches Attribut hat, aber bevor das Tag ausgeblendet wurde (ich habe die Tab-Leiste zum Wechseln verwendet), habe ich das falsche Format eingegeben und es dann ausgeblendet. Zu diesem Zeitpunkt war es tatsächlich falsch. Es wird auch vom Formular überprüft, aber da es ausgeblendet ist, meldet der Browser einen Fehler, wenn er den Fokus nicht erreichen kann.

Setzen Sie einfach den Wert der Eingabe auf leer, bevor Sie ihn ausblenden. Meine Eingabe verwendet nicht das erforderliche Attribut.

Dieser Fehler tritt auch auf, wenn die Eingabe display:none und erforderliche Attribute enthält.

Chrome möchte sich auf die erforderlichen, aber noch leeren Steuerelemente konzentrieren, sodass die Meldung „Bitte füllen Sie dieses Feld aus“ angezeigt werden kann. Wenn das Steuerelement jedoch ausgeblendet ist, wenn Chrome die Nachricht anzeigen möchte, d. h. wenn das Formular gesendet wird, kann sich Chrome nicht auf das Steuerelement konzentrieren, da es ausgeblendet ist, sodass das Formular nicht gesendet wird.

1. Löschen Sie beim Ausblenden das erforderliche Attribut

 selector.removeAttribute (erforderlich)

2. Wenn erforderlich nicht verwendet wird, kann dies daran liegen, dass der Tastentyp nicht festgelegt wurde. Legen Sie <button type=button> fest

3. Das Formular wird nicht überprüft, dh das Novalidate-Attribut wird hinzugefügt. (Nicht die endgültige Lösung ）<form novalidate></form>

4. Da es durch die Verwendung von display:none verursacht wird, verursacht die gleiche Sichtbarkeit: versteckt auch Probleme, also verwenden Sie es nicht. Sie können die Deckkraft des CSS-Stils festlegen: 0;

5. Deaktivieren Sie dieses Formularsteuerelement. deaktiviert Dies liegt daran, dass das Ausblenden eines Formularsteuerelements normalerweise darauf zurückzuführen ist, dass Ihnen dessen Wert egal ist. Daher wird dieses Namen-Wert-Paar des Formularsteuerelements nicht gesendet, wenn das Formular gesendet wird.

 $(body).on(submit, .myForm, function(evt) {// Deaktivieren Sie Dinge, die wir nicht validieren möchten.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled , true);// Wenn HTML5-Validierung verfügbar ist, lassen Sie sie laufen. Andernfalls verhindern Sie default.if (this.el.checkValidity && !this.el.checkValidity()) { // Dinge wieder aktivieren, die wir zuvor deaktiviert haben. $([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false); return true;}evt.preventDefault();/ Wir haben es zuvor deaktiviert.$([input:hidden, textarea:hidden, select:hidden]).attr(disabled, false);// Was auch immer sonst für die Formularverarbeitung hier ist.});

Die oben genannten Probleme und Lösungen, die bei der Verwendung der erforderlichen Eingaben von h5 auftreten, werden vom Herausgeber vorgestellt. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten . Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!