"Controllo modulo non valido" solo in Google Chrome

Il codice seguente funziona bene in Safari ma in Chrome e Firefox il modulo non verrà inviato. La console Chrome registra l'errore An invalid form control with name='' is not focusable. Qualche idea?

Tieni presente che sebbene i controlli seguenti non abbiano nomi, dovrebbero avere nomi al momento dell'invio, popolati dal Javascript di seguito. Il modulo funziona 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 vuole concentrarsi su un controllo che è richiesto ma ancora vuoto in modo che possa far apparire il messaggio "Compila questo campo". Tuttavia, se il controllo è nascosto nel punto in cui Chrome vuole far apparire il messaggio, cioè al momento dell'invio del modulo, Chrome non può concentrarsi sul controllo perché è nascosto, quindi il modulo non verrà inviato.

Quindi, per aggirare il problema, quando un controllo è nascosto da javascript, dobbiamo anche rimuovere l'attributo "richiesto" da quel controllo.

Mostrerà quel messaggio se hai un codice come questo:

<form>
  <div style="display: none;">
    <input name="test" type="text" required/>
  </div>

  <input type="submit"/>
</form>

la soluzione a questo problema dipenderà da come dovrebbe funzionare il sito

ad esempio, se non vuoi che il modulo venga inviato a meno che questo campo non sia richiesto, devi disabilitare il pulsante di invio

quindi il codice js per mostrare il div dovrebbe abilitare anche il pulsante di invio

puoi nascondere anche il pulsante (dovrebbe essere disabilitato e nascosto perché seènascosto ma non disabilitato l'utente può inviare il modulo in altri modi come premere enterin qualsiasi altro campo ma se il pulsanteèdisabilitato non succederà

se vuoi che il form venga inviato se il divènascosto devi disabilitare ogni input richiesto al suo interno e abilitare gli input mentre stai mostrando il div

se qualcuno ha bisogno dei codici per farlo dovresti dirmi esattamente di cosa hai bisogno

Se non ti interessa la validazione HTML5 (forse stai convalidando in JS o sul server), potresti provare ad aggiungere "novalidate" al form o agli elementi di input.

prova a utilizzare i tag appropriati per i controlli HTML5 Like for Number (interi)

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

per decimali o float

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

step = 'Any' Senza questo non è possibile inviare il modulo inserendo alcun valore decimale o float come 3.5 o 4.6 nel campo sopra.

Prova a correggere il pattern, digita per i controlli HTML5 per risolvere questo problema.

Ho ricevuto questo errore e ho determinato che era effettivamente su un campo che non era nascosto.

In questo caso, era un type="number"campo, che è obbligatorio. Quando non è mai stato immesso alcun valore in questo campo, il messaggio di errore viene visualizzato nella console e il modulo non viene inviato. Immettere un valore e quindi rimuoverlo significa che l'errore di convalida viene visualizzato come previsto.

Credo che questo sia un bug in Chrome: la mia soluzione alternativa per ora era trovare un valore iniziale / predefinito.

Ho avuto l'errore:

Un controllo del modulo non valido con nome = "telefono" non è attivabile.

Ciò stava accadendo perché non stavo usando correttamente il campo richiesto, che abilitava e disabilitava quando facevo clic su un checkbok. La soluzione era rimuovere l' requiredattributo ogni volta che il checkbok non era contrassegnato e contrassegnarlo come richiesto quando la casella di controllo era contrassegnata.

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

Devo fare qualcosa del genere per correggere il bug, poiché ne ho alcuni type="number"con 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);
});

Se non imposto tutti i campi di input nascosti su nullchrome, cercherò comunque di convalidare l'input.

Nessuna convalida farà il lavoro.

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

Ho avuto questo problema quando avevo class = "hidden" nei campi di input perché stavo usando i pulsanti invece dei proiettili radio - e cambiando lo stato "attivo" tramite JS ..

Ho semplicemente aggiunto un campo di input radio aggiuntivo parte dello stesso gruppo in cui volevo che appaia il messaggio:

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

gli altri 2 proiettili attivi sono invisibili, questo non lo è e questo innesca il messaggio di convalida e nessun errore della console - un po 'un trucco ma cosa non lo è in questi giorni ..

questo errore si ottiene se si aggiunge il formato decimale. aggiungo solo

step="0.1"

Ho ricevuto questo messaggio di errore quando ho inserito un numero (999999) che era fuori dall'intervallo che avevo impostato per il modulo.

<input type="number" ng-model="clipInMovieModel" id="clipInMovie" min="1" max="10000">

$("...").attr("required"); and $("...").removeAttr("required"); 

non ha funzionato per me fino a quando non ho inserito tutto il mio codice jQuery tra questo:

$(document).ready(function() {
    //jQuery code goes here
});

sostituire requiredcon obbligatorio = "obbligatorio"