Ein ungültiges Formularelement mit dem Namen='' kann nicht fokussiert werden

Question

In Google Chrome können einige Kunden nicht zur Zahlungsseite weitergehen. Beim Versuch, ein Formular abzusenden, erhalte ich diesen Fehler:

Ein ungültiges Formularelement mit dem Namen='' kann nicht fokussiert werden.

Dies stammt aus der JavaScript-Konsole.

Ich habe gelesen, dass das Problem daran liegen könnte, dass versteckte Felder das erforderliche Attribut haben. Das Problem ist nun, dass wir .net webforms erforderliche Feld-Validatoren verwenden und nicht das html5 erforderliche Attribut.

Es scheint zufällig zu sein, wer diesen Fehler erhält. Gibt es jemanden, der eine Lösung dafür kennt?

Answer 1

Dieses Problem tritt auf Chrome auf, wenn ein Formularfeld die Validierung nicht besteht, aber da die entsprechende ungültige Steuerung nicht fokussierbar ist, scheitert auch der Versuch des Browsers, die Nachricht "Bitte füllen Sie dieses Feld aus" neben ihm anzuzeigen.

Ein Formularsteuerelement ist möglicherweise zum Zeitpunkt der Validierung aus mehreren Gründen nicht fokussierbar. Die beiden unten beschriebenen Szenarien sind die häufigsten Ursachen:

• Das Feld ist gemäß dem aktuellen Kontext der Geschäftslogik irrelevant. In einem solchen Szenario sollte die entsprechende Steuerung deaktiviert oder aus dem DOM entfernt oder zu diesem Zeitpunkt nicht mit dem required -Attribut markiert werden.

• Es kann zu einer vorzeitigen Validierung kommen, wenn ein Benutzer die Taste ENTER auf einer Eingabe drückt. Oder ein Benutzer auf eine Schaltfläche/Eingabesteuerung im Formular klickt, die das type -Attribut der Steuerung nicht korrekt definiert hat. Wenn das Typattribut einer Schaltfläche nicht auf button gesetzt ist, führt Chrome (oder ein anderer Browser) bei jedem Klicken auf die Schaltfläche eine Validierung durch, da submit der Standardwert für das type -Attribut einer Schaltfläche ist.

Um das Problem zu lösen, wenn Sie eine Schaltfläche auf Ihrer Seite haben, die etwas anderes als senden oder zurücksetzen macht, denken Sie immer daran, dies zu tun: .

Answer 2

Das Hinzufügen eines novalidate Attributes zum Formular wird helfen:

Answer 3

In deinem form könntest du versteckte input haben, die das required Attribut haben:

Das form kann sich nicht auf diese Elemente konzentrieren, du musst das required von allen versteckten Inputs entfernen oder eine Validierungsfunktion in JavaScript implementieren, um sie zu behandeln, wenn du wirklich einen versteckten Input benötigst.

Answer 4

Falls jemand anderes dieses Problem hat, habe ich dasselbe erlebt. Wie in den Kommentaren diskutiert wurde, lag es daran, dass der Browser versuchte, versteckte Felder zu validieren. Er hat leere Felder im Formular gefunden und versucht, sich darauf zu konzentrieren, aber weil sie auf display:none; gesetzt waren, konnte er das nicht. Daher der Fehler.

Ich konnte es lösen, indem ich etwas Ähnliches wie dies verwendet habe:

$("body").on("submit", ".myForm", function(evt) {

    // Dinge deaktivieren, die wir nicht validieren möchten.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // Wenn HTML5-Validierung verfügbar ist, lass es laufen. Andernfalls verhindere standardmäßig.
    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();

    // Dinge wieder aktivieren, die wir zuvor deaktiviert haben.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Alles andere Formularverarbeitung erfolgt hier.
});

Dies könnte auch ein Duplikat von "Ungültige Formularsteuerung" nur in Google Chrome sein

Answer 5

In meinem Fall lag das Problem daran, dass das input type="radio" required mit visibility: hidden; ausgeblendet wurde:

Diese Fehlermeldung wird auch angezeigt, wenn das erforderliche radio- oder checkbox-Eingabefeld die CSS-Eigenschaft display: none; hat.

Wenn Sie benutzerdefinierte Radio-/Checkbox-Eingabefelder erstellen möchten, die im UI ausgeblendet werden müssen, und trotzdem das required-Attribut beibehalten wollen, sollten Sie stattdessen die Eigenschaft opacity: 0; verwenden: