2011-08-24 18 views
6

El botón Enviar en este formulario no hace nada a menos que elimine style="display:none" del template=row div. ¿¿Por qué??Google Chrome no puede enviar formularios con pantalla: ninguno

(El name de cada control de formulario se rellena dinámicamente por javascript, sin embargo, para simplificar la resolución de problemas, me encontré con la forma sin el javascript y el problema se reduce a si o no que display etiqueta es allí).

Esto es lo que dice Chrome consola:

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> 
+0

¿Qué quiere decir con "no se puede enviar"? –

+0

Lo siento, acabo de editar la pregunta para aclarar – MFB

Respuesta

4

La causa parece ser HTML 5 constraint validation - es el atributo require. Chrome comenzó a admitir esto con sus versiones recientes.

Aparentemente parece que es backward compatibility issue, pero puede solucionarlo estableciendo el atributo formnovalidate para el botón Enviar.

que suponer que esto es realmente una característica de seguridad que impide la presentación de los datos del usuario supuestos mediante la presentación de manipulado, el contenido oculto, estos puntos de cotización en esa dirección:

Si no está siendo prestados uno de los controles (por ejemplo, tiene el conjunto de atributos oculto), los agentes de usuario pueden informar un error de script.

Sus entradas son de tipo text, por lo que su propósito es permitir que los usuarios introducen los datos, la presentación de su contenido mientras oculta es algo que un usuario probablemente no querría.

Si aún desea enviar entradas ocultas mientras utiliza la validación del cliente, sugeriría usar <input type="hidden"> en su lugar - Podría imaginar que no hay ningún error en la validación porque están destinados a ser invisibles.

+0

que soluciona el problema, gracias. Sin embargo, ahora no puedo tener la validación del lado del cliente, ¿verdad? No hay problema si ese es el caso, pero solo quería asegurarme de que no me faltaba algo que todavía me permitiera validar los campos requeridos. – MFB

+0

He editado la publicación. Pude imaginar que 'input type =" hidden "' todavía podría pasar la validación de formulario. – emboss

1

hice un jsFiddle para explorar su problema here, y me las arreglé para solucionarlo añadiendo comprobado a sus entradas RadioButton así: <input type="radio" data-keyname="label" value="label" name="label" required checked>. En el código anterior, los botones de opción no están marcados, pero dado que están marcados como required, el formulario está fallando la validación y Chrome se niega a enviar el formulario.

+0

Gracias Sebastian, esa es una buena solución, pero dado que el javascript que excluí realmente clona los controles, realmente no quiero que las radios sean revisadas por defecto, de lo contrario seguirían cancelando la elección legítima del usuario cada vez que se clonan los controles. – MFB

Cuestiones relacionadas