it-swarm.com.de

Ein ungültiges Formularsteuerelement mit name = '' kann nicht fokussiert werden. OHNE ERFORDERLICH OR VERSTECKTE EINGÄNGE

Ich stehe vor dem bekannten Fehler "Nicht fokussierbar" von Chrome, aber meine Situation unterscheidet sich von der in dem anderen Beitrag erläuterten Situation, die ich dort finden konnte. 

Ich habe diese Fehlermeldung zuerst auf eine weise spitze Eingabe kopiert, diese Eingabe hat kein erforderliches Attribut: Der Code:

<fieldset>
    <label>Total (montaje incl.)</label>
    <input type="number" id="priceFinal" name="priceFinal"> €
</fieldset>

Der Fehler: Ein ungültiges Formularsteuerelement mit name = 'priceFinal' kann nicht fokussiert werden.

Während der Benutzer das Formular ausfüllt, erhält dieses Feld seinen Wert durch ein js-Skript mit jquery. Der Benutzer gibt eine Größe in eine andere Eingabe ein, das Skript rechnet mit dem Größenwert und setzt dann das Ergebnis mit der Jquery-Funktion in die Eingabe 'priceFinal': .val ()

Im Browser sehen wir, dass die Eingabe korrekt gefüllt ist und zu diesem Zeitpunkt keine Fehler angezeigt werden. Und mit der "novalidate" -Lösung geht alles gut, also könnte es nicht für den nicht fokusierbaren Fehler verantwortlich sein, denke ich.

Dann bekam ich den gleichen Fehler mit einer Eingabe ohne Namen, die ich nicht geschrieben habe und in meinem DOM nicht existiert:

Ein ungültiges Formularsteuerelement mit name = '' ist nicht fokussierbar.

Dies ist seltsam, da die einzige Eingabe ohne Namen in meinem Formular der Typ ist: Senden Sie einen 

<input type="submit" class="btn btn-default" value="Ver presupuesto" />

Ich habe einige Pflichtfelder, habe aber immer überprüft, ob sie ausgefüllt sind, wenn ich das Formular schicke. Ich füge es nur für den Fall ein, dass es helfen könnte:

<fieldset>
    <input type="text" id="clientName" name="clientName" placeholder="Nombre y apellidos"  class="cInput" required >
    <input type="text" id="client_ID" name="client_ID" required placeholder="CIF / NIF / DNI" class="cInput">
</fieldset>
<fieldset>
    <input type="text" id="client_add" name="client_add" placeholder="Dirección de facturación" class="addInput" required >
</fieldset>

<fieldset>
    <input type="text" id="client_ph" name="client_ph" placeholder="Teléfono" class="cInput" required>
    <input type="email" id="client_mail" name="client_mail" placeholder="Email" class="cInput" required> 
</fieldset>

Die novalidate-Lösung löscht den Fehler, behebt ihn jedoch nicht. Ich meine, es muss einen Weg geben, um ihn ohne Hacks zu lösen. 

Hat jemand eine Ahnung, was los sein könnte? Danke

13
nach

Ich hatte das gleiche Problem, und jeder war für die schlechten versteckten Eingaben verantwortlich, aber es scheint, als ob ein Fehler das erforderliche Feld innerhalb eines Feldsatzes hat Eingang.

Dieser Fehler ist nur in Chrome vorhanden, den ich in Version 43.0.2357.124 getestet habe. __ In Firefox nicht vorhanden.

Beispiel (sehr einfach).

<form>
  <fieldset name="mybug">
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

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

Der Fehler ist schwer zu erkennen, da Feldsets normalerweise keinen Namen haben und name='' eine WTF ist. aber schneiden Sie Stück für Stück die Form, bis ich den Täter gefunden habe .. Wenn Sie Ihre erforderliche Eingabe aus dem Feldset erhalten, ist der Fehler weg.

<form>
    <select required="required" name="hola">
      <option value=''>option 1</option>
     </select>

  <fieldset name="mybug">
    <input type="submit" name="submit" value="send" />
  </fieldset>
</form>

Ich würde es melden, aber ich weiß nicht, wo die Chrome-Community für Fehler ist.

18
Neto Yo

Dank dieses Beitrags habe ich gesehen, dass mein Problem auch bei Chrome lag und versuchte, mich auf meine Feldsätze zu konzentrieren, anstatt auf das Eingabefeld.

Um eine bessere Antwort von der Konsole zu erhalten:

  • Weisen Sie jedem DOM-Element einen neuen Namen zu
  • Setze jeden Eingang und wähle style.display auf 'block'
  • Der Typ der Eingabeelemente [type = "hidden"] wurde in 'text' geändert.

    function cleanInputs(){
        var inputs  = document.getElementsByTagName( 'input' ),
            selects = document.getElementsByTagName( 'select' ),
            all     = document.getElementsByTagName( '*' );
        for( var i=0, x=all.length; i<x; i++ ){
            all[i].setAttribute( 'name', i + '_test' );
        }
        for( var i=0, x=selects.length; i<x; i++ ){
            selects[i].style.display = 'block';
        }
        for( var i=0, x=inputs.length; i<x; i++ ){
            if( inputs[i].getAttribute( 'type' ) === 'hidden' ){
                inputs[i].setAttribute( 'type', 'text' );
            }
            inputs[i].style.display = 'block';
        }
        return true;
    }
    

In der Konsole habe ich cleanInputs () ausgeführt und dann das Formular ..__ übergeben. Das Ergebnis der Konsole war:

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

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

Als ich dann in die "Elements" -Ansicht von Web Developer wechselte, konnte ich "28_test" und "103_test" (beide Feldgruppen) finden. Dies bestätigte, dass mein Problem ein erforderliches Eingabefeld war, das in einem Feldset verschachtelt war.

5
Doug

Ich hatte das gleiche Problem, also habe ich required = "required" aus den störenden Feldern entfernt.

1
iltaf khalid

Wenn Sie den Fehler erhalten, wenn die jQuery-Funktion ausgeführt wird, versuchen Sie, "return false" für Ihre Funktion oder function (e) zu verwenden. ...}

1
acarayol

ich hatte dieses Problem einmal. Um es zu beheben, fügen Sie hinzu 

novalidate

als Attribut für das Formular. z.B

<form action="" novalidate>
....
</form>
1
Canaan Etai

Beim Schreiben der Frage wurde mir eines klar: Der Wert, den das Skript in das Feld "priceFinal" legte, war manchmal eine Dezimalzahl. 

In diesem Fall bestand die Lösung darin, das Schrittattribut für diese Eingabe zu schreiben:

... step="any" ...

Schritt auf w3s

Daher ist dieser 'nofocusable' Fehler nicht nur ein erforderliches und verstecktes Feldproblem, sondern wird auch durch Formatkonflikte generiert. 

0
nach

Nach gab mir den besten Zeiger ... (y) Ich hatte auch einen Eingabetyp = "number" mit step = "0.1" und die Konsole zeigt mir diesen Fehler beim Validieren an: Ein ungültiges Formularsteuerelement mit name = '' ist nicht fokussierbar .

entfernen Sie den Schritt = "0.1" auf dem Element. Jetzt kann das Formular überprüft werden

0
Sjoerd

Hier ist die Lösung ....

<form>
  <input type="text" ng-show="displayCondition" ng-required="displayCondition"/>
</form>

Viele Leute wissen nicht, dass die Übergabe von false in ng-required die Anweisung deaktiviert.

0
Mohammad Amir