"Ungültige Formularsteuerung" nur in Google Chrome

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>

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.

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

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.

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.

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.

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");

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.

Keine Validierung erledigt den Job.

<form action="whatever" method="post" novalidate>

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.

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

step="0.1"

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

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

requireddurch erforderlich ersetzen = "erforderlich"