HTML5 Estilo de entrada requerido

Question

En HTML 5, podemos marcar las entradas como required y luego seleccionarlas con el pseudo selector [required] en CSS. Pero solo quiero diseñarlos cuando intenten enviar el formulario sin completar un elemento obligatorio. ¿Hay un selector para esto? ¿Qué tal el pequeño cuadro de mensaje que aparece?

Answer 1

Sí, ya que SLaks dijo que no hay un selector de CSS para hacer esto. Dudo que esto esté dentro del alcance de CSS porque CSS debería verificar el contenido de una entrada.

Su mejor opción, sin embargo, es probablemente llamar a una función de validación de JavaScript al hacer clic en un botón, en lugar de enviar el formulario. A continuación, comprobar los campos [requerido] de contenidos adecuados y, o bien enviar el formulario o resaltar los campos obligatorios que no fueron llenadas en.

jQuery tiene algunos plugins agradable que se ocupan de esto para usted http://docs.jquery.com/Plugins/validation

Answer 2

Puede use: selectores válidos y no válidos. Algo como esto

.field:valid { 
    border-color:#0f0; 
} 
.field:invalid { 
    border-color:#f00; 
} 

Sin embargo, esto sólo funcionará en los navegadores que soportan la validación nativa, y sólo para los campos que tengan sentido. Por lo que sé, en este momento eso solo significa Chrome (tal vez Safari, pero no lo haya verificado).

Por validación nativa me refiero a que en cromo si haces <input type="email"> el valor del campo será validado para el tipo de cadena de correo electrónico (sin javascript adicional), por lo que los estilos anteriores funcionarán. Sin embargo, si los adjuntara a un campo type="text", o un segundo campo de contraseña (que se supone que coincida con el primero), solo se pondría verde porque todo es válido, y en el caso de la contraseña, no hay " escribe "para eso de todos modos.

Lo que básicamente significa que para admitir todos los navegadores y, lo que es más importante, una gama más amplia de validaciones, debe recurrir a javascript, en cuyo caso asignar clases .valid/.invalid no debería ser un problema. :)

Answer 3

He recurrido al uso de JS para aplicar una clase de .validated a la forma de presentar, a continuación, utilizar esa clase de estilo: fields.eg válido:

.validated input:invalid { ... }

esta manera campos no aparecer como no válido en la carga de la página, solo después de enviar el formulario. Idealmente, habría una clase pseodo aplicada al formulario en el envío.

Answer 4

Hay una pseudoclass :user-error en el CSS Selectors 4 working draft que hará exactamente esto, disparando tanto el desenfoque de entrada como el envío de formulario.

Mientras tanto, estoy usando personalmente el increíble webshims polyfill library que cubre: error del usuario, o podría hackearlo usted mismo con algo similar a la respuesta de Toby.

Answer 5

input:required { 
    /* Style your required field */ 
    /* Be sure to style it as an individual field rather than just add your desired styles 
    for a required field. */ 
} 

Probado y probado en cromo. No lo he probado en ningún otro navegador.

Answer 6

Esta solución le dará un estilo a los campos de entrada que se requieren mediante el atributo , mientras que en blanco. Los navegadores eliminarán la pseudoclase inválida al rellenar un campo obligatorio en el teclado. Las versiones recientes de Firefox aplican automáticamente algo similar a este estilo, pero Chrome y IE no lo hacen.

input[required]:invalid { box-shadow: 0 0 3px 1px red } 

Inténtelo: http://jsfiddle.net/2Ph2X/