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?
html
validation
mp1990
quelle
quelle
Antworten:
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
required
zu 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
type
Attribut des Steuerelements nicht richtig definiert hat. Wenn das Typattribut einer Schaltfläche nicht festgelegt ist,button
führt Chrome (oder ein anderer Browser) bei jedem Klicken auf die Schaltfläche eine Überprüfung durch, da diessubmit
der Standardwert destype
Attributs 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
quelle
required
oder Hinzufügennovalidate
ist niemals eine gute Problemumgehung.number
Feld, in dem der Standardwert nicht gleichmäßig durch die Schrittgröße geteilt werden konnte. Durch Ändern der Schrittgröße wurde das Problem behoben.Das Hinzufügen eines
novalidate
Attributs zum Formular hilft:quelle
<fieldset>
In Ihrem
form
haben Sie möglicherweiseinput
dasrequired
Attribut versteckt :<input type="hidden" required />
<input type="file" required style="display: none;"/>
Sie
form
können sich nicht auf diese Elemente konzentrieren. Sie müssen sierequired
aus allen versteckten Eingaben entfernen oder eine Validierungsfunktion in Javascript implementieren, um sie zu verarbeiten, wenn Sie wirklich eine versteckte Eingabe benötigen.quelle
required
.pattern
allein kann dieses Problem verursachen.<input type="hidden" required />
und eines mit einem<input type="text" style="display: none" required />
, und das einzige, das den Fehler in Chrome anzeigt, ist dasdisplay: none
, während das"hidden"
eine gut einreicht.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:
Dies ist möglicherweise auch ein Duplikat von "Ungültige Formularsteuerung" nur in Google Chrome
quelle
In meinem Fall lag das Problem darin, dass
input type="radio" required
ich versteckt war mit:visibility: hidden;
Diese Fehlermeldung zeigt auch an, ob der erforderliche Eingabetyp
radio
odercheckbox
einedisplay: 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
required
Attribut weiterhin beibehalten wird, sollten Sie stattdessen Folgendes verwenden:opacity: 0;
CSS-Eigenschaftquelle
name=""
anstelle der ursprünglichen auswählen ?Keine der vorherigen Antworten hat bei mir funktioniert, und ich habe keine versteckten Felder mit dem
required
Attribut.In meinem Fall wurde das Problem dadurch verursacht, dass a
<form>
und dann a<fieldset>
als erstes Kind vorhanden sind, das<input>
dasrequired
Attribut 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.
quelle
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:
Eine einfache Lösung bestand darin, sie durch folgende zu ersetzen:
quelle
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 :)
quelle
Für mich passiert dies, wenn es ein
<select>
Feld mit einer vorgewählten Option mit dem Wert '' gibt: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.
quelle
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.
quelle
$("input").attr("required", "true");
oder$("input").prop('required',true);
entgegengesetzt können Sieremove
das Attribut / die Eigenschaft . >> jQuery hinzufügen erforderlich zu EingabefeldernFü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.
quelle
Diese Meldung wird angezeigt, wenn Sie folgenden Code haben:
quelle
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.
quelle
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 istz.B
Dies sollte die Aufgabe erledigen.
Es hat bei mir funktioniert ... Prost
quelle
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
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.
quelle
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:
Das hat mein Problem gelöst ... unglaublich.
quelle
In meinem Fall..
ng-show
wurde verwendet.ng-if
wurde an seine Stelle gesetzt und mein Fehler behoben.quelle
Für den Winkelgebrauch:
ng-required = "boolean"
Dadurch wird das HTML5-Attribut 'required' nur angewendet, wenn der Wert true ist.
quelle
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:
Löst aus
quelle
Es gibt viele Möglichkeiten, dies zu beheben
<form action="...." class="payment-details" method="post" novalidate>
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">
<input class="form-control" id="id_line1" maxlength="255" name="line1" placeholder="First line of address" type="text">
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.
quelle
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:
Ich habe es gelöst, indem ich stattdessen das erforderliche durch ng-Muster ersetzt habe.
Zum Beispiel der Lösung:
quelle
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-if
anstelle vonng-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.
quelle
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 einhidden
Div eingebettetDas Problem in meinem Fall war das
type="datetime-local"
, das - aus irgendeinem Grund - bei der Formularübermittlung validiert wurde.Ich habe das geändert
in das hinein
quelle
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 habemaxlength="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.
quelle
min='-9999999999.99' max='9999999999.99'
.Alternativ besteht eine andere und kinderleichte Antwort darin, das HTML5-Platzhalterattribut zu verwenden. Dann müssen keine js-Validierungen verwendet werden.
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.
quelle
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.
Html:
quelle
Stellen Sie sicher, dass für alle Steuerelemente in Ihrem Formular mit dem erforderlichen Attribut auch das Namensattribut festgelegt ist
quelle
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.
quelle
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:
quelle
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.
quelle