Google Chrome non può inviare moduli con display: nessuno

Question

Il pulsante Invia in questo modulo non esegue nulla a meno che non rimuovo style="display:none" dal div template=row. Perché??

(La name di ciascun controllo modulo è popolato dinamicamente da JavaScript, tuttavia, per semplificare la risoluzione dei problemi, ho eseguito il modulo senza il javascript e il problema si riduce o meno che display tag è lì).

Questo è ciò che dice Chrome console:

bundleAn invalid form control with name='' is not focusable. 
bundleAn invalid form control with name='label' is not focusable. 
bundleAn invalid form control with name='unique' is not focusable 

HTML:

<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"> 
    <input type="text" data-keyname="hint" placeholder="Hint"> 


    <select data-keyname="fieldtype" required> 
     <option value="">Field Type...</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" required> Label 
    <input type="radio" data-keyname="unique" value="unique" name="unique" required> 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> 

Answer 1

La causa sembra essere HTML 5 constraint validation - è l'attributo require. Chrome ha iniziato a supportarlo con le sue versioni recenti.

Apparentemente sembra che questo sia un backward compatibility issue, ma è possibile risolvere il problema impostando l'attributo formnovalidate per il pulsante di invio.

suppongo che questo è in realtà una funzione di sicurezza che impedisce l'invio dei dati utente presunti sottoponendo manipolato, contenuti nascosti, questi punti citazione in questa direzione:

Se uno dei controlli non è in fase di rendering (ad esempio, ha il set di attributi nascosti), quindi i programmi utente possono riportare un errore di script.

I suoi ingressi sono di tipo text, quindi il loro scopo è quello di consentire agli utenti di inserire i dati, presentando il loro contenuto, mentre nascosto è qualcosa che un utente probabilmente non vorrebbe.

Se si desidera inviare input nascosti mentre si utilizza la convalida del client, suggerirei invece di utilizzare <input type="hidden"> - Potrei immaginare che non ci siano errori di convalida in quanto sono destinati a essere invisibili.

Answer 2

Ho fatto una JSFiddle per esplorare il problema here, e sono riuscito a risolvere il problema con l'aggiunta di controllato agli ingressi RadioButton in questo modo: <input type="radio" data-keyname="label" value="label" name="label" required checked>. Nel tuo codice sopra, i pulsanti di opzione non vengono controllati, ma poiché sono contrassegnati come required il modulo non è in grado di convalidare e Chrome si rifiuta di inviare il modulo.