Ein ungültiges Formularsteuerelement mit name=” kann nicht fokussiert werden

Lesezeit: 9 Minuten

Ein ungultiges Formularsteuerelement mit name kann nicht fokussiert werden
mp1990

In Google Chrome können einige Kunden meine Zahlungsseite nicht aufrufen. Beim Versuch, ein Formular abzusenden, erhalte ich diese Fehlermeldung:

Ein ungültiges Formularsteuerelement mit name=”” kann nicht fokussiert werden.

Dies ist von der JavaScript-Konsole.

Ich habe gelesen, dass das Problem darauf zurückzuführen sein könnte, dass versteckte Felder das erforderliche Attribut haben. Nun besteht das Problem darin, dass wir die erforderlichen Feldvalidatoren für .net-Webformulare verwenden und nicht das erforderliche HTML5-Attribut.

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

  • Wenn Sie denken, dass es an versteckten Pflichtfeldern liegen könnte, sollten Sie vielleicht überprüfen, ob diese Felder in einigen Fällen leer bleiben? Wenn Sie beispielsweise user_id from session oder etwas Ähnliches eingeben, bleibt es in bestimmten Fällen möglicherweise leer?

    – dkasipović

    3. März 2014 um 13:31 Uhr

  • Einverstanden. Öffnen Sie die Entwicklerkonsole (F12) in Google Chrome und überprüfen Sie die Werte der Felder, um festzustellen, ob die Werte für diese Felder leer sind.

    – Der Vanille-Thrilla

    3. März 2014 um 13:33 Uhr

  • Danke für deinen Kommentar. Es ergibt für mich aber keinen Sinn? Ich habe ein einfaches asp.net-Formular, das asp.net-Formularsteuerelemente verwendet. Die Eingabesteuerelemente werden vom Framework generiert.

    – mp1990

    3. März 2014 um 13:35 Uhr

  • Ich habe nachgesehen und es gibt Werte in den Eingabefeldern. Ich habe ein verstecktes Eingabefeld, das auch einen Wert hat.

    – mp1990

    3. März 2014 um 13:36 Uhr

  • Ich denke, es passiert, wenn das Feld erforderlich ist, aber im Allgemeinen nicht “sichtbar” ist. Es passiert mir in einem Formular, das in mehrere Registerkarten aufgeteilt ist, dass sich das Feld, das den Fehler ausgelöst hat, in einer Registerkarte befindet, die zum Zeitpunkt der Übermittlung nicht aktiv ist. Ich habe das erforderliche Attribut aus dem Feld entfernt und eine spezifische Validierung durchgeführt

    – Tex Willer

    7. Dezember 2019 um 10:27 Uhr

Ein ungultiges Formularsteuerelement mit name kann nicht fokussiert werden
Benutzer2909164

Hinzufügen eines novalidate Attribut zum Formular hilft:

<form name="myform" novalidate>

  • Danke für deinen Kommentar. Aber ich frage mich, welche Sicherheitsrisiken damit einhergehen würden? Wenn überhaupt? Oder weist es den Browser einfach an, die Eingabefelder im Formular nicht zu validieren?

    – mp1990

    3. März 2014 um 14:06 Uhr

  • Es ist kein Sicherheitsrisiko. (Das Verlassen auf clientseitige Prüfungen ist.) Es ist ein Usability-Problem.

    – Jukka K. Korpela

    3. März 2014 um 14:39 Uhr

  • Ich habe versucht und festgestellt, dass “novalidate” tatsächlich erforderlich ist. Nur das Hinzufügen eines Formularnamens funktioniert nicht.

    – Jeff Tian

    27. August 2014 um 9:03 Uhr

  • Das Hinzufügen von novalidate stoppt auch die clientseitige Validierung, z. B. mit dem Rails Simple Form-Gem. Es ist besser, die Problemfelder gemäß Ankits Antwort + David Brunows Kommentar nicht erforderlich zu machen.

    – Stahl

    17. November 2014 um 17:18 Uhr


  • Ich habe festgestellt, dass „ein ungültiges Formularsteuerelement mit name=” nicht fokussierbar ist.“ zeigt auch an, ob die Eingänge in a sind <fieldset>

    – oscargilfc

    10. Juni 2015 um 2:13 Uhr

  • Mir ist aufgefallen, dass dies auch bei Feldern vom Typ „E-Mail“ passieren kann, die so eingestellt sind, dass keine angezeigt werden. Das Problem wird dadurch verursacht, dass Chrome versucht, das Format zu validieren.

    – David Brunow

    30. Mai 2014 um 5:20 Uhr

  • Es muss nicht haben required. pattern allein kann dieses Problem verursachen.

    – Schrittmacher

    27. Januar 2015 um 6:24 Uhr

  • In meinem Fall waren die Formularfelder nicht type=”hidden”, sie waren einfach nicht sichtbar, zB in einem Formular mit Registerkarten.

    – Josh Mc

    9. Februar 2015 um 1:31 Uhr

  • Ich habe zwei Formen, eine mit beiden an <input type="hidden" required /> und ein anderer mit einem <input type="text" style="display: none" required />und das einzige, was den Fehler in Chrome anzeigt, ist die display: nonewährend "hidden" man reicht fein ein.

    – Pere

    13. Mai 2015 um 14:19 Uhr

  • Dies ist die richtige Antwort. Chrome versucht, ein Feld zu validieren, das in CSS ausgeblendet wurde. Der verhindert, dass seine Validierungswarnmeldung angezeigt wird, und macht Sie auf diese Tatsache aufmerksam.

    – Überlicht

    8. Juni 2015 um 9:10 Uhr

Ein ungultiges Formularsteuerelement mit name kann nicht fokussiert werden
Horatio Alderaan

Falls noch jemand dieses Problem hat, ich habe das gleiche erlebt. Wie in den Kommentaren besprochen, lag es daran, dass der Browser versuchte, versteckte Felder zu validieren. Es fand leere Felder im Formular und versuchte, sich auf sie zu konzentrieren, aber weil sie darauf eingestellt waren display:none;, es konnte nicht. Daher der Fehler.

Ich konnte es lösen, indem ich etwas Ähnliches verwendete:

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

    // Disable things that we don't want to validate.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", true);

    // If HTML5 Validation is available let it run. Otherwise prevent default.
    if (this.el.checkValidity && !this.el.checkValidity()) {
        // Re-enable things that we previously disabled.
        $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);
        return true;
    }
    evt.preventDefault();

    // Re-enable things that we previously disabled.
    $(["input:hidden, textarea:hidden, select:hidden"]).attr("disabled", false);

    // Whatever other form processing stuff goes here.
});

Außerdem ist dies möglicherweise nur in Google Chrome ein Duplikat von “Invalid form control”.

  • Wenn Sie geneigt sind, diese Antwort abzulehnen, hinterlassen Sie bitte einen Kommentar, um mir den Grund mitzuteilen. Ich würde die Antwort lieber entfernen, wenn sie schlechte Informationen enthält, als sie hier zu belassen und die Community in die Irre zu führen.

    – Horatio Alderaan

    2. Juni 2014 um 4:05 Uhr

  • Ich werde nicht abstimmen, aber ich bin der Meinung, dass dieser Code einen Brute-Force-Ansatz zum “Maskieren des Problems” verwendet. Es ist sicherlich nützlich, wenn Sie mit Legacy-Code arbeiten, aber für neuere Projekte würde ich empfehlen, sich Ihr Problem etwas genauer anzusehen. Diese Antwort gilt auch für die Verwendung von “novalidate” im Form-Tag, aber das ist etwas sichtbarer. +1 für deaktiviert statt entfernen erforderlich.

    – Jonathan DeMarks

    27. Oktober 2014 um 14:58 Uhr

  • Um ein wenig Kontext zu geben, ich befand mich genau in der Situation des “Umgangs mit Legacy-Code”, als ich auf dieses Problem stieß. Ich stimme voll und ganz zu, dass es ein Hack ist. Es ist viel besser, das Markup so zu gestalten, dass diese Situation nicht auftritt. Bei veralteten Codebasen und unflexiblen CMS-Systemen ist dies jedoch nicht immer möglich. Der obige Ansatz, eher zu deaktivieren als “novalidate” zu verwenden, war der beste Weg, den ich mir vorstellen konnte, um das Problem zu lösen.

    – Horatio Alderaan

    11. November 2014 um 23:02 Uhr

  • Ich stimme dem Ansatz zu, versteckte Felder zu deaktivieren. Durch das Entfernen ihrer „erforderlichen“ Attribute gehen die Informationen verloren, sollten sie später erneut angezeigt werden. Eine erneute Aktivierung würde dies jedoch beibehalten.

    – Druckles

    4. Juni 2015 um 16:38 Uhr

  • Ich liebe diese Lösung und denke, dass sie gut funktioniert, wenn Sie ein Formular mit Eingaben haben, die basierend auf den ausgewählten Werten anderer Eingaben variabel angezeigt oder ausgeblendet werden. Dadurch bleiben die erforderlichen Einstellungen erhalten, und das Formular kann weiterhin gesendet werden. Noch besser, wenn die Validierung fehlschlägt und der Benutzer etwas völlig anderes macht, sind keine zusätzlichen Resets erforderlich.

    – lewsid

    17. August 2017 um 1:42 Uhr


1646168532 472 Ein ungultiges Formularsteuerelement mit name kann nicht fokussiert werden
Gus

In meinem Fall war das Problem mit der input type="radio" required versteckt werden mit:

visibility: hidden;

Diese Fehlermeldung zeigt auch an, ob es sich um den erforderlichen Eingabetyp handelt radio oder checkbox hat ein display: none; CSS-Eigenschaft.

Wenn du möchtest Erstellen Sie benutzerdefinierte Radio-/Checkbox-Eingaben, bei denen sie von der Benutzeroberfläche ausgeblendet werden müssen und behalte trotzdem die required Attribut, sollten Sie stattdessen Folgendes verwenden:

opacity: 0; CSS-Eigenschaft

  • Wenn Sie geneigt sind, diese Antwort abzulehnen, hinterlassen Sie bitte einen Kommentar, um mir den Grund mitzuteilen. Ich würde die Antwort lieber entfernen, wenn sie schlechte Informationen enthält, als sie hier zu belassen und die Community in die Irre zu führen.

    – Horatio Alderaan

    2. Juni 2014 um 4:05 Uhr

  • Ich werde nicht abstimmen, aber ich bin der Meinung, dass dieser Code einen Brute-Force-Ansatz zum “Maskieren des Problems” verwendet. Es ist sicherlich nützlich, wenn Sie mit Legacy-Code arbeiten, aber für neuere Projekte würde ich empfehlen, sich Ihr Problem etwas genauer anzusehen. Diese Antwort gilt auch für die Verwendung von “novalidate” im Form-Tag, aber das ist etwas sichtbarer. +1 für deaktiviert statt entfernen erforderlich.

    – Jonathan DeMarks

    27. Oktober 2014 um 14:58 Uhr

  • Um ein wenig Kontext zu geben, ich befand mich genau in der Situation des “Umgangs mit Legacy-Code”, als ich auf dieses Problem stieß. Ich stimme voll und ganz zu, dass es ein Hack ist. Es ist viel besser, das Markup so zu gestalten, dass diese Situation nicht auftritt. Bei veralteten Codebasen und unflexiblen CMS-Systemen ist dies jedoch nicht immer möglich. Der obige Ansatz, eher zu deaktivieren als “novalidate” zu verwenden, war der beste Weg, den ich mir vorstellen konnte, um das Problem zu lösen.

    – Horatio Alderaan

    11. November 2014 um 23:02 Uhr

  • Ich stimme dem Ansatz zu, versteckte Felder zu deaktivieren. Durch das Entfernen ihrer „erforderlichen“ Attribute gehen die Informationen verloren, sollten sie später erneut angezeigt werden. Eine erneute Aktivierung würde dies jedoch beibehalten.

    – Druckles

    4. Juni 2015 um 16:38 Uhr

  • Ich liebe diese Lösung und denke, dass sie gut funktioniert, wenn Sie ein Formular mit Eingaben haben, die basierend auf den ausgewählten Werten anderer Eingaben variabel angezeigt oder ausgeblendet werden. Dadurch bleiben die erforderlichen Einstellungen erhalten, und das Formular kann weiterhin gesendet werden. Noch besser, wenn die Validierung fehlschlägt und der Benutzer etwas völlig anderes macht, sind keine zusätzlichen Resets erforderlich.

    – lewsid

    17. August 2017 um 1:42 Uhr


1646168532 127 Ein ungultiges Formularsteuerelement mit name kann nicht fokussiert werden
Pere

Keine der vorherigen Antworten hat bei mir funktioniert, und ich habe keine ausgeblendeten Felder mit der required Attribut.

In meinem Fall wurde das Problem dadurch verursacht, dass a <form> und dann a <fieldset> als sein erstes Kind, das die hält <input> mit dem required Attribut. Entferne den <fieldset> Problem gelöst. Oder Sie können Ihr Formular damit umhüllen; es wird von HTML5 erlaubt.

Ich verwende Windows 7 x64, Chrome-Version 43.0.2357.130 m.

  • Hatte das gleiche Problem, danke für den Hinweis. Es ist seltsam, es mit Ihrer Lösung zu lösen.

    – Ben

    23. Juli 2015 um 2:29 Uhr

  • Danke, das war bei mir auch das Problem.

    – fantastischer Reis

    24. Juli 2015 um 18:44 Uhr

  • in meinem Fall hilft mir dieser Hinweis

    – Anja Ishmukhametova

    27. Juli 2015 um 5:15 Uhr

  • Fieldsets waren auch mein Problem. In meinem Fall wurde die Antwort hier gefunden: stackoverflow.com/a/30785150/1002047 Scheint ein Chrome-Fehler zu sein (da der betreffende HTML-Code mit dem Validator des W3C validiert wird). Das einfache Ändern meiner Fieldsets in divs löste das Problem.

    – Eric S. Bullington

    30. Juli 2015 um 14:24 Uhr

  • @Pere, ich habe das Problem auf andere Weise korrigiert, die Antwort von “abhinav kinagi” unten lieferte den Hinweis, es gab andere Felder mit Validierungen, die den gleichen Fehler verursachten (nicht fokussierbarer Fehler). Daher musste ich die Validierungsattribute während hide() entfernen und während show() in Jquery wieder hinzufügen.

    – rinilnath

    2. Dezember 2021 um 7:54 Uhr


904840cookie-checkEin ungültiges Formularsteuerelement mit name=” kann nicht fokussiert werden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy