"Ungültige Formularsteuerung" nur in Google Chrome

106

Der folgende Code funktioniert gut in Safari, aber in Chrome und Firefox wird das Formular nicht gesendet. Die Chrome-Konsole protokolliert den FehlerAn invalid form control with name='' is not focusable . Irgendwelche Ideen?

Beachten Sie, dass die unten stehenden Steuerelemente zwar keine Namen haben, jedoch zum Zeitpunkt der Übermittlung Namen haben sollten, die mit dem unten stehenden Javascript gefüllt sind. Das Formular funktioniert in Safari.

<form method="POST" action="/add/bundle"> 
<p> 
    <input type="text" name="singular" placeholder="Singular Name" required> 
    <input type="text" name="plural" placeholder="Plural Name" required> 
</p> 
<h4>Asset Fields</h4> 
<div class="template-view" id="template_row" style="display:none"> 
    <input type="text" data-keyname="name" placeholder="Field Name" required> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 
    <select data-keyname="fieldtype" required> 
        <option value="">Field Type...</option> 
        <option value="Email">Email</option> 
        <option value="Password">Password</option> 
        <option value="Text">Text</option> 
    </select>    
    <input type="checkbox" data-keyname="required" value="true"> Required
    <input type="checkbox" data-keyname="search" value="true"> Searchable
    <input type="checkbox" data-keyname="readonly" value="true"> ReadOnly
    <input type="checkbox" data-keyname="autocomplete" value="true"> AutoComplete
    <input type="radio" data-keyname="label" value="label" name="label"> Label
    <input type="radio" data-keyname="unique" value="unique" name="unique"> Unique
    <button class="add" type="button">+</button> 
    <button class="remove" type="button">-</button> 
</div> 

<div id="target_list"></div> 
    <p><input type="submit" name="form.submitted" value="Submit" autofocus></p> 
</form>

<script> 
function addDiv()
{
    var pCount = $('.template-view', '#target_list').length;
    var pClone = $('#template_row').clone();
    $('select, input, textarea', pClone).each(function(idx, el){
        $el = $(this);
        if ((el).type == 'radio'){
            $el.attr('value', pCount + '_' + $el.data('keyname'));
        }
        else {
            $el.attr('name', pCount + '_' + $el.data('keyname'));
        };
    });
    $('#target_list').append(pClone);
    pClone.show();
}

function removeDiv(elem){
    var pCount = $('.template-view', '#target_list').length;
    if (pCount != 1)
    {
        $(elem).closest('.template-view').remove();
    }
};

$('.add').live('click', function(){
    addDiv();
});

$('.remove').live('click', function(){
    removeDiv(this);
});

$(document).ready(addDiv);

</script>
MFB
quelle
Es werden nur erfolgreiche Kontrollen gesendet. Um erfolgreich zu sein, muss ein Steuerelement einen Namen haben. Es gibt auch andere Anforderungen (siehe Link).
RobG
Die Optionsfelder haben Namen. Alles andere bekommt über JavaScript einen Namen.
MFB

Antworten:

247

Chrome möchte sich auf ein Steuerelement konzentrieren, das erforderlich, aber noch leer ist, damit die Meldung "Bitte füllen Sie dieses Feld aus" angezeigt wird. Wenn das Steuerelement jedoch an dem Punkt ausgeblendet ist, an dem Chrome die Nachricht anzeigen möchte, dh zum Zeitpunkt der Formularübermittlung, kann sich Chrome nicht auf das Steuerelement konzentrieren, da es ausgeblendet ist. Daher wird das Formular nicht gesendet.

Um das Problem zu umgehen, müssen wir, wenn ein Steuerelement durch Javascript ausgeblendet wird, auch das Attribut 'erforderlich' aus diesem Steuerelement entfernen.

MFB
quelle
9
Ah, das ist scheiße. Obwohl dies sinnvoll ist, kann der Browser möglicherweise nicht erraten, wie Ihre Benutzeroberfläche mit den Validierungsfehlermeldungen umgehen soll, wenn das Feld ausgeblendet ist (möglicherweise ein Formular mit Registerkarten ...).
Wesley Murch
12
Danke, das funktioniert. Es ist eine Schande, dass Chrome dies tut, es sollte nur das Feld überspringen.
472084
Ich hatte dieses Problem in Chrome für Textbereiche, wenn die Textlänge im Textbereich mehr als 4100 Buchstaben betrug, keine versteckten erforderlichen Felder. Wenn die
Textlänge
Wenn das Feld nicht benötigt wird, wenn es ausgeblendet ist, wäre es dann nicht noch sinnvoller, es stattdessen zu deaktivieren? ( stackoverflow.com/a/22753533/421243 )
David Cook
3
Was passiert, wenn dieser Fehler in Chrome weiterhin auftritt, das Feld jedoch nicht leer ist? Haben Sie eine Idee, wie Sie das lösen können?
Leah
12

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>

Die Lösung dieses Problems hängt davon ab, wie die Site funktionieren soll

Wenn Sie beispielsweise nicht möchten, dass das Formular gesendet wird, es sei denn, dieses Feld ist erforderlich, sollten Sie die Schaltfläche "Senden" deaktivieren

Daher sollte der js-Code zum Anzeigen des div auch die Senden-Schaltfläche aktivieren

Sie können die Schaltfläche auch ausblenden (sollte deaktiviert und ausgeblendet sein, da der Benutzer das Formular, wenn es ausgeblendet, aber nicht deaktiviert ist, wie beim Drücken mit anderen Personen senden kann enter in einem anderen Feld drücken. Wenn die Schaltfläche jedoch deaktiviert ist, geschieht dies nicht

Wenn Sie möchten, dass das Formular gesendet wird, wenn das div ausgeblendet ist, sollten Sie alle erforderlichen Eingaben deaktivieren und die Eingaben aktivieren, während Sie das div anzeigen

Wenn jemand die Codes dazu benötigt, solltest du mir genau sagen, was du brauchst

Robert
quelle
Ja ... können Sie bitte eine Lösung dafür nennen?
Rex Rex
@ RexRex Ich bearbeite die Antwort sehen, ob dies Ihnen hilft oder sagen Sie mir, was genau Sie brauchen
Robert
@ KaziMasumBillah Ich verstehe nicht, können Sie bitte Beispiel als Antwort schreiben
Robert
9

Wenn Sie sich nicht für die HTML5-Validierung interessieren (möglicherweise validieren Sie in JS oder auf dem Server), können Sie versuchen, dem Formular oder den Eingabeelementen "novalidate" hinzuzufügen.

John Velonis
quelle
1
Leute sollten niemals solche Dinge tun, er sollte dafür sorgen, dass sein js-Code mit HTML5 funktioniert, und nicht nur HTML5 schließen, weil er damit nicht umgehen kann
Robert
Ich stimme nicht zu Sie brauchen nur einen guten Grund, die Dinge anders zu machen. Es gibt immer noch viele leistungsstarke Validierungsbibliotheken. Die HTML5-Validierung ist einfach und schnell einzurichten. Und vor allem ist es gut, Standards zu befolgen. Das heißt aber nicht, dass es "die beste" Lösung ist. Sag niemals nie. Es kommt immer darauf an. Obwohl ich damit einverstanden bin, dass Sie die Client-Validierung "nie" vollständig überspringen sollten. ;-)
5

Versuchen Sie, geeignete Tags für HTML5-Steuerelemente zu verwenden. Like for Number (Ganzzahlen)

<input type='number' min='0' pattern ='[0-9]*' step='1'/>

für Dezimalstellen oder Float

 <input type='number' min='0' step='Any'/>

step = 'Any' Ohne dies können Sie Ihr Formular nicht senden, indem Sie einen Dezimal- oder Gleitkommawert wie 3,5 oder 4,6 in das obige Feld eingeben.

Versuchen Sie, das Muster zu korrigieren, und geben Sie HTML5-Steuerelemente ein, um dieses Problem zu beheben.

sudhAnsu63
quelle
Du hast mein Problem gelöst. Aber achten Sie darauf, dass patterndies im type="number"Feld nicht allgemein akzeptabel zu sein scheint
João Pimentel Ferreira
3

Ich habe diesen Fehler erhalten und festgestellt, dass er sich tatsächlich auf einem Feld befindet, das nicht verborgen ist.

In diesem Fall war es ein type="number"Feld, das benötigt wird. Wenn noch nie ein Wert in dieses Feld eingegeben wurde, wird die Fehlermeldung in der Konsole angezeigt und das Formular nicht gesendet. Wenn Sie einen Wert eingeben und dann entfernen, wird der Validierungsfehler wie erwartet angezeigt.

Ich glaube, dies ist ein Fehler in Chrome: Meine Problemumgehung bestand vorerst darin, einen Anfangs- / Standardwert zu finden.

Matthew Schinckel
quelle
Möglicher Fehler in Chrome. Ist mir auch passiert. +1
Gamliela
1

Ich hatte den Fehler:

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

Dies geschah, weil ich das erforderliche Feld nicht richtig verwendete, was beim Klicken auf einen Checkbok aktiviert und deaktiviert wurde. Die Lösung bestand darin, das requiredAttribut zu entfernen , wenn der Checkbok nicht markiert war, und es als erforderlich zu markieren, wenn das Kontrollkästchen markiert war.

var telefono = document.getElementById("telefono");  
telefono.removeAttribute("required");
frddy
quelle
1

Ich muss so etwas tun, um den Fehler zu beheben, da ich einige habe type="number"mit min="0.00000001":

HTML:

<input type="number" min="0.00000001" step="0.00000001" name="price" value="[%price%]" />

JS:

$('input[type="submit"]').click(function(e) {
    //prevent chrome bug
    $("input:hidden").val(null);
});

Wenn ich nicht alle versteckten Eingabefelder auf nullChrome setze, wird immer noch versucht, die Eingabe zu validieren.

Dalin Huang
quelle
1

Keine Validierung erledigt den Job.

<form action="whatever" method="post" novalidate>
Hassi
quelle
0

Ich hatte dieses Problem, als ich class = "hidden" in den Eingabefeldern hatte, weil ich Schaltflächen anstelle von Aufzählungszeichen verwendete - und den "aktiven" Status über JS änderte.

Ich habe einfach einen zusätzlichen Funkeingabefeldteil derselben Gruppe hinzugefügt, in der die Nachricht angezeigt werden soll:

<input type="radio" id="thenorm" name="ppoption" value=""  required style="opacity:0"/>

Die anderen 2 aktiven Aufzählungszeichen sind unsichtbar, dieses ist nicht und dies löst die Validierungsnachricht und keine Konsolenfehler aus - ein bisschen hacken, aber was ist heutzutage nicht.

Fstarocka Burns
quelle
0

Dieser Fehler wird beim Hinzufügen eines Dezimalformats angezeigt. Ich füge nur hinzu

step="0.1"
Роман Зыков
quelle
0

Ich habe diese Fehlermeldung erhalten, als ich eine Nummer (999999) eingegeben habe, die außerhalb des Bereichs lag, den ich für das Formular festgelegt hatte.

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">
Thomas David Kehoe
quelle
-2
$("...").attr("required"); and $("...").removeAttr("required"); 

hat bei mir nicht funktioniert, bis ich meinen gesamten jQuery-Code dazwischen geputtet habe:

$(document).ready(function() {
    //jQuery code goes here
});
Fédi BELKACEM
quelle
-5

requireddurch erforderlich ersetzen = "erforderlich"

Webodrey
quelle
2
Erforderlich ist ein HTML5-Attribut und "erforderlich" hat dieselbe Bedeutung wie erforderlich = "erforderlich", da keine anderen Attribute verfügbar sind.
ilter