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

670

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?

mp1990
quelle
11
Wenn Sie der Meinung sind, dass dies an versteckten Pflichtfeldern liegt, sollten Sie möglicherweise prüfen, ob diese Felder in einigen Fällen leer bleiben. Wenn Sie beispielsweise user_id aus einer Sitzung oder etwas Ähnliches eingeben, bleibt diese in bestimmten Fällen möglicherweise leer.
Dkasipovic
1
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.
Die Vanille Thrilla
Danke für deinen Kommentar. Es macht mir aber keinen Sinn? Ich habe ein einfaches asp.net-Formular, das asp.net-Formularsteuerelemente verwendet. Die Eingabesteuerung wird vom Framework generiert.
mp1990
Ich habe überprüft und es gibt Werte in den Eingabefeldern. Ich habe ein verstecktes Eingabefeld, das auch einen Wert hat.
mp1990
3
Ich denke, es passiert, wenn das Feld benötigt wird, aber allgemein nicht "sichtbar" ist. Es passiert mir in einem Formular, das in mehrere Registerkarten aufgeteilt ist. Das Feld, das den Fehler ausgelöst hat, befindet sich in einer Registerkarte, die zum Zeitpunkt der
Übermittlung

Antworten:

814

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

Igwe Kalu
quelle
2
Dieses Problem kann auftreten, wenn eine Seite mit einem Browser erstellt und getestet wird, der die clientseitige Validierung nicht unterstützt oder das Senden des Formulars nicht verhindert (siehe Safari). Der nächste Entwickler oder Benutzer mit einem Browser, der das Senden von Formularen bei clientseitigen Fehlern verhindert (siehe Chrome; auch bei versteckten Formularelementen), stößt auf das Problem eines unzugänglichen Formulars, da das Formular nicht gesendet werden kann und keine Nachricht von erhalten wird der Browser oder die Website. Das vollständige Verhindern der Validierung über 'novalidate' ist keine richtige Antwort, da die clientseitige Validierung Benutzereingaben unterstützen sollte. Das Ändern der Website ist die Lösung.
graste
4
Danke für die ausführliche Antwort. Das Weglassen requiredoder Hinzufügen novalidateist niemals eine gute Problemumgehung.
FatCop
2
Dies sollte die richtige Antwort sein. Wenn Sie die clientseitige HTML5-Validierung verwenden, wird durch Hinzufügen von Novalidate ein Problem behoben, während ein anderes erstellt wird. Schade, dass Chrome eine Eingabe überprüfen möchte, die nicht angezeigt wird (und daher nicht erforderlich sein sollte).
kheit
1
Ich habe in meinem Fall nur ein Beispiel hinterlassen und ein verstecktes numberFeld, in dem der Standardwert nicht gleichmäßig durch die Schrittgröße geteilt werden konnte. Durch Ändern der Schrittgröße wurde das Problem behoben.
James Scott
3
@ IgweKalu guten Anruf. Ich bin auf diese Implementierung von TinyMCE über ein Textfeld gestoßen. TinyMCE verbirgt das ursprüngliche Formularfeld (das "erforderlich" war) und löst diesen Fehler aus. Lösung, entfernen Sie das jetzt versteckte "erforderliche" Attribut aus dem Formular und verlassen Sie sich auf eine andere Methode, um sicherzustellen, dass es ausgefüllt wird.
John
355

Das Hinzufügen eines novalidateAttributs zum Formular hilft:

<form name="myform" novalidate>
user2909164
quelle
41
Es ist kein Sicherheitsrisiko. (Es ist ein Problem der Benutzerfreundlichkeit, sich auf clientseitige Überprüfungen zu verlassen.)
Jukka K. Korpela
9
Ich habe versucht und festgestellt, dass "novalidate" nicht erforderlich ist! Ich habe meinem Formular nur einen Namen gegeben und alles hat gut funktioniert!
Sunny Sharma
33
Ich habe versucht und festgestellt, dass "novalidate" tatsächlich erforderlich ist. Nur das Hinzufügen eines Formularnamens funktioniert nicht.
Jeff Tian
13
Durch das Hinzufügen von novalidate wird auch die clientseitige Validierung gestoppt, z. B. mit dem Juwel Rails Simple Form. Besser, die Problembereiche nicht erforderlich zu machen, laut Ankits Antwort + David Brunows Kommentar.
Stahl
9
Ich habe festgestellt, dass "Ein ungültiges Formularsteuerelement mit name = '' nicht fokussierbar ist." zeigt auch an, ob die Eingänge in a<fieldset>
oscargilfc
259

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.

Ankit Sharma
quelle
7
Ich habe festgestellt, dass dies auch bei Feldern vom Typ "E-Mail" auftreten kann, die so eingestellt sind, dass keine angezeigt werden. Dies ist das Problem, das durch den Versuch von Chrome verursacht wurde, das Format zu überprüfen.
David Brunow
3
Es muss nicht haben required. patternallein kann dieses Problem verursachen.
Pacerier
3
In meinem Fall waren die Formularfelder nicht type = "hidden", sie waren einfach nicht sichtbar, z. B. in einem Formular mit Registerkarten.
Josh Mc
Ich habe zwei Formulare, eines mit einem <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 das display: none, während das "hidden"eine gut einreicht.
Pere
Dies ist die richtige Antwort. Chrome versucht, ein Feld zu überprüfen, das in CSS ausgeblendet wurde. Das verhindert, dass es seine Validierungswarnmeldung anzeigt, und macht Sie auf diese Tatsache aufmerksam.
Superluminary
33

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

Horatio Alderaan
quelle
6
Wenn Sie diese Antwort ablehnen möchten, hinterlassen Sie bitte einen Kommentar, um mich wissen zu lassen, warum. Ich würde die Antwort lieber entfernen, wenn sie schlechte Informationen enthält, als sie hier zu lassen und die Community irrezuführen.
Horatio Alderaan
1
Ich werde nicht abstimmen, aber ich glaube, dieser Code verwendet einen Brute-Force-Ansatz, der das Problem maskiert. Es ist sicherlich nützlich, wenn es um Legacy-Code geht, aber für neuere Projekte würde ich empfehlen, Ihr Problem etwas genauer zu betrachten. Diese Antwort gilt auch für die Verwendung von "novalidate" für das Formular-Tag, dies ist jedoch etwas sichtbarer. +1 für deaktiviert statt entfernen erforderlich.
Jonathan DeMarks
1
Um ein wenig Kontext zu geben, befand ich 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 Sie dieser Situation nicht begegnen. Bei älteren Codebasen und unflexiblen CMS-Systemen ist dies jedoch nicht immer möglich. Der obige Ansatz, "novalidate" zu deaktivieren, anstatt ihn zu verwenden, war der beste Weg, den ich mir vorstellen konnte, um das Problem zu lösen.
Horatio Alderaan
2
Ich stimme dem Ansatz zu, versteckte Felder zu deaktivieren. Durch das Entfernen der erforderlichen Attribute gehen die Informationen verloren, falls sie später erneut angezeigt werden. Eine erneute Aktivierung würde dies jedoch beibehalten.
Druckles
1
Ich liebe diese Lösung und finde, 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 tut, sind keine zusätzlichen Zurücksetzungen erforderlich.
lewsid
17

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

Gus
quelle
das gleiche Problem mit der Ausnahme, dass ich die Bibliothek selectivity.js verwende, die das aktuelle Auswahlfeld ausblendet und ein alternatives js-Feld mit js und css anzeigt. Wenn ich die erforderliche Option verwende, wird dieser Fehler ausgelöst. form-field.js: 8 create: 1 Ein ungültiges Formularsteuerelement mit dem Namen = 'listing_id' ist nicht fokussierbar. Wie kann ich es umgehen?
Inzmam ul Hassan
@InzmamGujjar Wie ich verstanden habe, erstellt Ihr js-Plugin eine weitere Auswahleingabe mit eigenen Klassen. Vielleicht die Plugin-CSS-Klassen ändern oder die erstellte Eingabe name=""anstelle der ursprünglichen auswählen ?
Gus
13

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.

Pere
quelle
Hatte das gleiche Problem, danke für den Hinweis. Es ist seltsam, es mit Ihrer Lösung zu lösen.
Ben
Danke, das war auch in meinem Fall das Problem.
fantastischer
in meinem Fall hilft mir dieser Hinweis
Anja Ishmukhametova
2
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 W3C-Validator validiert wird). Das Problem wurde einfach durch Ändern meiner Feldsätze in Divs gelöst.
Eric S. Bullington
@ EricS.Bullington danke für den Hinweis. Ich wusste nichts von dieser Antwort; Als dieser Benutzer fand ich es selbst, Teile meiner Form herauszuschneiden. Übrigens weiß ich nichts über das Chrome-Versionsnummerierungssystem, aber von 124 auf 130 in 4 Jahren sieht nicht nach einem großen Schritt aus ...
Pere
9

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;
}
Sam
quelle
Dies war auch die Lösung, die ich am besten fand. Dadurch kann die Fehlermeldung tatsächlich in der Nähe der unsichtbaren Formularsteuerelemente angezeigt werden.
Rob
8

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 :)

Ghuroo
quelle
7

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.

piotr_cz
quelle
7

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.

Maniempire
quelle
Hinweis: $("input").attr("required", "true"); oder $("input").prop('required',true);entgegengesetzt können Sie removedas Attribut / die Eigenschaft . >> jQuery hinzufügen erforderlich zu Eingabefeldern
fWd82
7

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);          
});
SudarP
quelle
3

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>
Robert
quelle
Ich weiß, es ist das gleiche, ich mache nur ein Beispiel, einige Leute verstehen die Dinge besser mit Codes: D
Robert
3

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.

Kartik Shenoy
quelle
1
Danke für diese Idee! Es war nützlich für mich, ALLE manchmal versteckten Formularelemente umzuschalten, unabhängig davon, ob die einzelnen erforderlich sind oder nicht, daher ist meine Logik nett und einfach :)
Gabe Kopley
3

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

utkarshk
quelle
3

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.

Mouneer
quelle
3

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.

Gustavo Soler
quelle
3

In meinem Fall..

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

Chareesa Graham
quelle
Hat meinen Tag gerettet. Vielen Dank
Syed Atir Mohiuddin
2

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" />
Nick Taras
quelle
2

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.

Frankenmint
quelle
2

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>

  1. 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">

  1. 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.

Umar Asghar
quelle
2

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" >
Khachornchit Songsaen
quelle
1

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.

JD Mallen
quelle
1

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" />
SoliQuiD
quelle
1

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.

Kevin Marmet
quelle
Meins wurde auf ähnliche Weise gelöst, aber die Konfiguration war min='-9999999999.99' max='9999999999.99'.
Ricardo Green
0

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.

utkarshk
quelle
0

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>
James Fleming
quelle
Ihre Lösung ist in der Tat sehr, sehr riskant. Jeder mit langsamer CPU wird immer noch den gleichen Fehler erhalten. Es ist (oder wird) eine typische Rennbedingung. Möglicherweise sind alte Smartphones betroffen. Seien Sie also bitte vorsichtig mit dieser Lösung.
Drachenfels
0

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

Adam Diament
quelle
0

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.

eloone
quelle
0

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;

 }
Sudip
quelle
0

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.

AlastairDewar
quelle