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

Ich habe ein akutes Problem auf meiner Website. In Google Chrome können einige Kunden meine Zahlungsseite nicht aufrufen. Beim Versuch, ein Formular einzureichen, wird folgende Fehlermeldung angezeigt:

An invalid form control with name='' is not focusable.

Dies ist von der JavaScript-Konsole.

Ich habe gelesen, dass das Problem auf versteckte Felder mit dem erforderlichen Attribut zurückzuführen sein könnte. Das Problem ist nun, dass wir für .net-Webformulare erforderliche Feldvalidatoren 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?

Dieses Problem tritt in Chrome auf, wenn die Validierung eines Formularfelds fehlschlägt. Da jedoch das jeweilige ungültige Steuerelement nicht fokussierbar ist, schlägt der Versuch des Browsers, die Meldung "Bitte füllen Sie dieses Feld aus" daneben anzuzeigen , ebenfalls fehl.

Ein Formularsteuerelement kann zum Zeitpunkt der Auslösung der Validierung aus mehreren Gründen möglicherweise nicht fokussierbar sein. Die beiden unten beschriebenen Szenarien sind die wichtigsten Ursachen:

• Das Feld ist nach dem aktuellen Kontext der Geschäftslogik irrelevant. In einem solchen Szenario sollte das jeweilige Steuerelement aus dem DOM entfernt oder requiredzu diesem Zeitpunkt nicht mit dem Attribut markiert werden.

• Eine vorzeitige Überprüfung kann auftreten, wenn ein Benutzer bei einer Eingabe die EINGABETASTE drückt . Oder ein Benutzer, der auf eine Schaltfläche / ein Eingabesteuerelement in dem Formular klickt, das das typeAttribut des Steuerelements nicht richtig definiert hat. Wenn das Typattribut einer Schaltfläche nicht festgelegt ist, buttonführt Chrome (oder ein anderer Browser) bei jedem Klicken auf die Schaltfläche eine Überprüfung durch, da dies submitder Standardwert des typeAttributs einer Schaltfläche ist .

  Wenn Sie auf Ihrer Seite eine Schaltfläche haben, die etwas anderes als Senden oder Zurücksetzen ausführt , denken Sie immer daran, um das Problem zu lösen : <button type="button">.

Siehe auch https://stackoverflow.com/a/7264966/1356062

Das Hinzufügen eines novalidateAttributs zum Formular hilft:

<form name="myform" novalidate>

In Ihrem formhaben Sie möglicherweise inputdas requiredAttribut versteckt :

• <input type="hidden" required />
• <input type="file" required style="display: none;"/>

Sie formkönnen sich nicht auf diese Elemente konzentrieren. Sie müssen sie requiredaus allen versteckten Eingaben entfernen oder eine Validierungsfunktion in Javascript implementieren, um sie zu verarbeiten, wenn Sie wirklich eine versteckte Eingabe benötigen.

Falls jemand anderes dieses Problem hat, habe ich das Gleiche erlebt. Wie in den Kommentaren erläutert, war dies darauf zurückzuführen, dass der Browser versuchte, versteckte Felder zu überprüfen. Es ging darum, leere Felder im Formular zu finden und sich auf sie zu konzentrieren, aber weil sie darauf eingestellt waren display:none;, konnte es nicht. Daher der Fehler.

Ich konnte es mit etwas Ähnlichem lösen:

$("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.
});

Dies ist möglicherweise auch ein Duplikat von "Ungültige Formularsteuerung" nur in Google Chrome

In meinem Fall lag das Problem darin, dass input type="radio" requiredich versteckt war mit:

visibility: hidden;

Diese Fehlermeldung zeigt auch an, ob der erforderliche Eingabetyp radiooder checkboxeine display: none;CSS-Eigenschaft vorliegt .

Wenn Sie benutzerdefinierte Radio- / Kontrollkästchen-Eingaben erstellen möchten, bei denen diese vor der Benutzeroberfläche ausgeblendet werden müssen und das requiredAttribut weiterhin beibehalten wird, sollten Sie stattdessen Folgendes verwenden:

opacity: 0; CSS-Eigenschaft

Keine der vorherigen Antworten hat bei mir funktioniert, und ich habe keine versteckten Felder mit dem requiredAttribut.

In meinem Fall wurde das Problem dadurch verursacht, dass a <form>und dann a <fieldset>als erstes Kind vorhanden sind, das <input>das requiredAttribut with enthält . Entfernen des <fieldset>gelösten Problems. Oder Sie können Ihr Formular damit einwickeln. es ist von HTML5 erlaubt.

Ich bin auf Windows 7 x64, Chrome Version 43.0.2357.130 m.

Eine weitere Möglichkeit, wenn Sie den Fehler bei einer Checkbox-Eingabe erhalten. Wenn Ihre Kontrollkästchen benutzerdefiniertes CSS verwenden, das die Standardeinstellung verbirgt und durch ein anderes Styling ersetzt, löst dies auch den nicht fokussierbaren Fehler in Chrome bei einem Validierungsfehler aus.

Ich habe dies in meinem Stylesheet gefunden:

input[type="checkbox"] {
    visibility: hidden;
}

Eine einfache Lösung bestand darin, sie durch folgende zu ersetzen:

input[type="checkbox"] {
    opacity: 0;
}

Es kann sein, dass Sie Felder mit dem erforderlichen Attribut ausgeblendet haben (Anzeige: keine) .

Bitte überprüfen Sie, ob alle erforderlichen Felder für den Benutzer sichtbar sind :)

Für mich passiert dies, wenn es ein <select>Feld mit einer vorgewählten Option mit dem Wert '' gibt:

<select name="foo" required="required">
    <option value="" selected="selected">Select something</option>
    <option value="bar">Bar</option>
    <option value="baz">Baz</option>
</select>

Leider ist dies die einzige browserübergreifende Lösung für einen Platzhalter ( Wie erstelle ich einen Platzhalter für ein Auswahlfeld? ).

Das Problem tritt in Chrome 43.0.2357.124 auf.

Wenn Sie ein Feld mit dem erforderlichen Attribut haben, das während der Formularübermittlung nicht sichtbar ist, wird dieser Fehler ausgelöst. Sie entfernen nur das erforderliche Attribut, wenn Sie versuchen, dieses Feld auszublenden. Sie können das erforderliche Attribut hinzufügen, falls Sie das Feld erneut anzeigen möchten. Auf diese Weise wird Ihre Validierung nicht beeinträchtigt und gleichzeitig wird der Fehler nicht ausgelöst.

Für Select2 Jquery Problem

Das Problem ist darauf zurückzuführen, dass die HTML5-Validierung ein verstecktes ungültiges Element nicht fokussieren kann. Ich bin auf dieses Problem gestoßen, als ich mich mit dem jQuery Select2-Plugin befasst habe.

Lösung Sie können jedem Element eines Formulars einen Ereignis-Listener und ein 'ungültiges' Ereignis hinzufügen, damit Sie es unmittelbar vor dem HTML5-Validierungsereignis bearbeiten können.

$('form select').each(function(i){
this.addEventListener('invalid', function(e){            
        var _s2Id = 's2id_'+e.target.id; //s2 autosuggest html ul li element id
        var _posS2 = $('#'+_s2Id).position();
        //get the current position of respective select2
        $('#'+_s2Id+' ul').addClass('_invalid'); //add this class with border:1px solid red;
        //this will reposition the hidden select2 just behind the actual select2 autosuggest field with z-index = -1
        $('#'+e.target.id).attr('style','display:block !important;position:absolute;z-index:-1;top:'+(_posS2.top-$('#'+_s2Id).outerHeight()-24)+'px;left:'+(_posS2.left-($('#'+_s2Id).width()/2))+'px;');
        /*
        //Adjust the left and top position accordingly 
        */
        //remove invalid class after 3 seconds
        setTimeout(function(){
            $('#'+_s2Id+' ul').removeClass('_invalid');
        },3000);            
        return true;
}, false);          
});

Diese Meldung wird angezeigt, wenn Sie folgenden Code haben:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

Ja. Wenn für ein Steuerelement für ausgeblendete Formulare ein Feld erforderlich ist, wird dieser Fehler angezeigt. Eine Lösung wäre , diese Formularsteuerung zu deaktivieren . Dies liegt daran, dass Sie normalerweise ein Formularsteuerelement ausblenden, weil Sie sich nicht mit dessen Wert befassen. Daher wird dieses Name-Wert-Paar für die Formularsteuerung beim Senden des Formulars nicht gesendet.

Sie können .removeAttribute("required")nach Elementen suchen, die zum Zeitpunkt des Ladens des Fensters ausgeblendet sind. da es sehr wahrscheinlich ist, dass das betreffende Element aufgrund von Javascript (Formulare mit Registerkarten) als versteckt markiert ist

z.B

if(document.getElementById('hidden_field_choice_selector_parent_element'.value==true){
    document.getElementById('hidden_field').removeAttribute("required");        
}

Dies sollte die Aufgabe erledigen.

Es hat bei mir funktioniert ... Prost

Eine weitere mögliche Ursache, die nicht in allen vorherigen Antworten behandelt wird, wenn Sie ein normales Formular mit erforderlichen Feldern haben und das Formular senden und es dann direkt nach dem Senden (mit Javascript) ausblenden, ohne dass die Validierungsfunktion funktioniert.

Die Validierungsfunktion versucht, sich auf das erforderliche Feld zu konzentrieren und die Fehlervalidierungsmeldung anzuzeigen, aber das Feld wurde bereits ausgeblendet. "Ein ungültiges Formularsteuerelement mit dem Namen = '' kann nicht fokussiert werden." erscheint!

Bearbeiten:

Um diesen Fall zu behandeln, fügen Sie einfach die folgende Bedingung in Ihren Submit-Handler ein

submitHandler() {
    const form = document.body.querySelector('#formId');

    // Fix issue with html5 validation
    if (form.checkValidity && !form.checkValidity()) {
      return;
    }

    // Submit and hide form safely
  }

Bearbeiten: Erklärung

Angenommen, Sie verstecken das Formular beim Senden, garantiert dieser Code, dass das Formular / die Felder erst ausgeblendet werden, wenn das Formular gültig ist. Wenn ein Feld ungültig ist, kann sich der Browser problemlos darauf konzentrieren, da dieses Feld weiterhin angezeigt wird.

Es gibt Dinge, die mich immer noch überraschen ... Ich habe eine Form mit dynamischem Verhalten für zwei verschiedene Entitäten. Eine Entität benötigt einige Felder, die andere nicht. Mein JS-Code führt also je nach Entität Folgendes aus: $ ('# periodo'). RemoveAttr ('required'); $ ("# periodo-container"). hide ();

und wenn der Benutzer die andere Entität auswählt: $ ("# periodo-container"). show (); $ ('# periodo'). prop ('erforderlich', wahr);

Aber manchmal, wenn das Formular gesendet wird, tritt das Problem auf: "Ein ungültiges Formularsteuerelement mit name = periodo '' ist nicht fokussierbar (ich verwende den gleichen Wert für die ID und den Namen).

Um dieses Problem zu beheben, müssen Sie sicherstellen, dass die Eingabe, in der Sie "Erforderlich" festlegen oder entfernen, immer sichtbar ist.

Also, was ich getan habe ist:

$("#periodo-container").show(); //for making sure it is visible
$('#periodo').removeAttr('required'); 
$("#periodo-container").hide(); //then hide

Das hat mein Problem gelöst ... unglaublich.

In meinem Fall..

ng-showwurde verwendet.
ng-ifwurde an seine Stelle gesetzt und mein Fehler behoben.

Für den Winkelgebrauch:

ng-required = "boolean"

Dadurch wird das HTML5-Attribut 'required' nur angewendet, wenn der Wert true ist.

<input ng-model="myCtrl.item" ng-required="myCtrl.items > 0" />

Ich bin hierher gekommen, um zu antworten, dass ich dieses Problem selbst ausgelöst habe, weil ich das NICHT geschlossen habe </form> Tag UND mehrere Formulare auf derselben Seite habe. Das erste Formular umfasst auch die Suche nach Validierung für Formulareingaben von anderen Stellen. Da DIESE Formulare ausgeblendet sind, haben sie den Fehler ausgelöst.

so zum Beispiel:

<form method="POST" name='register' action="#handler">


<input type="email" name="email"/>
<input type="text" name="message" />
<input type="date" name="date" />

<form method="POST" name='register' action="#register">
<input type="text" name="userId" />
<input type="password" name="password" />
<input type="password" name="confirm" />

</form>

Löst aus

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

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

Ein ungültiges Formularsteuerelement mit dem Namen = 'Bestätigen' kann nicht fokussiert werden.

Es gibt viele Möglichkeiten, dies zu beheben

1. Fügen Sie Ihrem Formular novalidate hinzu, aber es ist völlig falsch, da die Formularüberprüfung entfernt wird, was zu falschen Informationen führt, die von den Benutzern eingegeben wurden.

<form action="...." class="payment-details" method="post" novalidate>

2. Die Verwendung kann das erforderliche Attribut aus den erforderlichen Feldern entfernen, was ebenfalls falsch ist, da die Formularüberprüfung erneut entfernt wird.

   An Stelle von:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" required="required">

   Use this:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">

3. Die Verwendung kann die erforderlichen Felder deaktivieren, wenn Sie das Formular nicht senden möchten, anstatt eine andere Option auszuführen. Dies ist meiner Meinung nach die empfohlene Lösung.

   mögen:

<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text" disabled="disabled">

oder deaktivieren Sie es über Javascript / JQuery-Code, abhängig von Ihrem Szenario.

Ich habe das gleiche Problem bei der Verwendung von Angular JS gefunden. Es wurde durch die Verwendung zusammen mit ng-hide erforderlich . Wenn ich auf die Schaltfläche "Senden" geklickt habe, während dieses Element ausgeblendet war, ist der Fehler aufgetreten. Ein ungültiges Formularsteuerelement mit name = '' ist nicht fokussierbar.endlich!

Zum Beispiel für die Verwendung von ng-hide zusammen mit den erforderlichen:

<input type="text" ng-hide="for some condition" required something >

Ich habe es gelöst, indem ich stattdessen das erforderliche durch ng-Muster ersetzt habe.

Zum Beispiel der Lösung:

<input type="text" ng-hide="for some condition" ng-pattern="some thing" >

Bei anderen AngularJS 1.x-Benutzern trat dieser Fehler auf, weil ich ein Formularsteuerelement nicht angezeigt habe, anstatt es vollständig aus dem DOM zu entfernen, wenn das Steuerelement nicht ausgefüllt werden musste.

Ich habe dies behoben, indem ich ng-ifanstelle von ng-show/ verwendet habeng-hide auf dem div das Formularsteuerelement verwendet habe, für das eine Validierung erforderlich ist.

Hoffe, dies hilft Ihnen anderen Edge-Case-Benutzern.

Lassen Sie mich meinen Fall darlegen, da er sich von allen oben genannten Lösungen unterschied. Ich hatte ein HTML-Tag, das nicht richtig geschlossen wurde. Das Element war nicht required , aber es war in ein hiddenDiv eingebettet

Das Problem in meinem Fall war das type="datetime-local", das - aus irgendeinem Grund - bei der Formularübermittlung validiert wurde.

Ich habe das geändert

<input type="datetime-local" />

in das hinein

<input type="text" />

Ich wollte hier antworten, weil KEINE dieser Antworten oder ein anderes Google-Ergebnis das Problem für mich gelöst hat.

Für mich hatte es nichts mit Feldsätzen oder versteckten Eingaben zu tun.

Ich fand, dass wenn ich max="5"(zB) verwenden würde, es diesen Fehler erzeugen würde. Wenn ich verwendet habe maxlength="5" ... kein Fehler.

Ich konnte den Fehler und die Fehlerbehebung mehrmals reproduzieren.

Ich weiß immer noch nicht, warum die Verwendung dieses Codes den Fehler erzeugt, soweit dies besagt, dass er gültig sein sollte, auch ohne ein "min", glaube ich.

Alternativ besteht eine andere und kinderleichte Antwort darin, das HTML5-Platzhalterattribut zu verwenden. Dann müssen keine js-Validierungen verwendet werden.

<input id="elemID" name="elemName" placeholder="Some Placeholder Text" type="hidden" required="required">

Chrome kann keine leeren, versteckten und erforderlichen Elemente finden, auf die es sich konzentrieren kann. Einfache Lösung.

Ich hoffe, das hilft. Ich bin mit dieser Lösung total sortiert.

Ich bin mit dem gleichen Problem hierher gekommen. Für mich hatte das Einfügen von versteckten Elementen nach Bedarf - dh die Ausbildung in einer Job-App) die erforderlichen Flaggen.

Was mir klar wurde, war, dass der Validator schneller auf das injizierte feuerte, als das Dokument fertig war, also beschwerte er sich.

Mein ursprüngliches ng-erforderliches Tag verwendete das Sichtbarkeitstag (vm.flags.hasHighSchool).

Ich habe das Problem gelöst, indem ich ein dediziertes Flag erstellt habe, um das erforderliche ng-required = "vm.flags.highSchoolRequired == true" zu setzen.

Ich habe beim Setzen dieses Flags einen 10-ms-Rückruf hinzugefügt und das Problem wurde behoben.

 vm.hasHighSchool = function (attended) {

        vm.flags.hasHighSchool = attended;
        applicationSvc.hasHighSchool(attended, vm.application);
        setTimeout(function () {
            vm.flags.highSchoolRequired = true;;
        }, 10);
    }

Html:

<input type="text" name="vm.application.highSchool.name" data-ng-model="vm.application.highSchool.name" class="form-control" placeholder="Name *" ng-required="vm.flags.highSchoolRequired == true" /></div>

Stellen Sie sicher, dass für alle Steuerelemente in Ihrem Formular mit dem erforderlichen Attribut auch das Namensattribut festgelegt ist

Dieser Fehler ist mir passiert, weil ich ein Formular mit erforderlichen Feldern gesendet habe, die nicht ausgefüllt wurden.

Der Fehler wurde erzeugt, weil der Browser versuchte, sich auf die erforderlichen Felder zu konzentrieren, um den Benutzer zu warnen, dass die Felder erforderlich waren. Diese erforderlichen Felder wurden jedoch in einer Anzeige ohne Div ausgeblendet, sodass der Browser sich nicht auf sie konzentrieren konnte. Ich habe von einer sichtbaren Registerkarte aus gesendet und die erforderlichen Felder befanden sich in einer ausgeblendeten Registerkarte, daher der Fehler.

Stellen Sie zur Behebung sicher, dass Sie steuern, dass die erforderlichen Felder ausgefüllt sind.

Dies liegt daran, dass das Formular eine versteckte Eingabe mit dem erforderlichen Attribut enthält.

In meinem Fall hatte ich ein Auswahlfeld, das von jquery tokenizer im Inline-Stil ausgeblendet wird. Wenn ich kein Token auswähle, gibt der Browser beim Senden des Formulars den oben genannten Fehler aus.

Also habe ich es mit der folgenden CSS-Technik behoben:

  select.download_tag{
     display: block !important;//because otherwise, its throwing error An invalid form control with name='download_tag[0][]' is not focusable.
    //So, instead set opacity
    opacity: 0;
    height: 0px;

 }

Beim Klonen eines HTML-Elements zur Verwendung in einem Formular wurde der gleiche Fehler angezeigt.

(Ich habe ein teilweise vollständiges Formular, in das eine Vorlage eingefügt wurde, und dann wird die Vorlage geändert.)

Der Fehler bezog sich auf das ursprüngliche Feld und nicht auf die geklonte Version.

Ich konnte keine Methoden finden, die das Formular zwingen würden, sich selbst neu zu bewerten (in der Hoffnung, dass alle Verweise auf die alten Felder, die jetzt nicht existieren, entfernt werden), bevor die Validierung ausgeführt wird.

Um dieses Problem zu umgehen, habe ich das erforderliche Attribut aus dem ursprünglichen Element entfernt und es dynamisch zum geklonten Feld hinzugefügt, bevor ich es in das Formular eingefügt habe. Das Formular überprüft nun die geklonten und geänderten Felder korrekt.