css - validacion - Diseñando la pista en un campo de entrada HTML5 usando el atributo requerido

validar campos vacios en html

Question

¿Es posible diseñar la sugerencia que aparece en un campo de entrada de HTML5 cuando se usa el atributo requerido? Si no está seguro de lo que estoy hablando, haga clic en enviar en este formulario sin rellenar nada. Debería tener una sugerencia emergente.

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

Revisé la fuente de CSS y no pude ver nada con respecto a la pista.

He descubierto que diseñar el elemento div en forma de reinicio afecta la forma en que aparece. Pero no sé cómo enfocarlo específicamente.

Tenga en cuenta: NO me estoy refiriendo a un marcador de posición.

Saludos, Thomas.

Answer 1

Encontré una forma de desactivar las sugerencias para que no se muestren.

Básicamente, encontré que están dentro de un elemento div, en mi restablecimiento si lo agrego a la parte superior.

div { display: none; }
body div { display: block; }

Entonces las sugerencias ya no aparecen, pero el resto de mis divs funcionan bien.

También me hacen creer que las sugerencias aparecen fuera de la etiqueta del documento HTML. Como el estilo con html div tampoco tiene ningún efecto en las sugerencias. Cosas interesantes.

Esto solo funciona en Chrome.

Answer 2

Si te estás refiriendo a los consejos que dicen que usan Opera y Chrome, me temo que no puedes.

Answer 3

La razón por la que puede diseñar el error burbuja con un selector de div es un error en Chrome 11/12, que se debe corregir en las versiones más recientes . Hay algunas pseudoclases para diseñar la burbuja de error en Chrome 12 (y quizás en Safari6) (:: - webkit-validation-bubble etc.). Puede encontrar la estructura HTML completa que incluye los selectores de pseudoelementos y algunos ejemplos de estilo en el siguiente documento .

Tenga en cuenta que esta es una extensión de webkit para la validación de restricciones de formularios HTML5 y no estándar. Si desea utilizar una forma de estilo del mensaje de error en todos los navegadores compatibles con validación HTML5, debe usar JavaScript.

El principio clave de esto es que debe agregar un controlador al evento no válido (Nota: el evento no válido no se dispara) y luego evitar la interacción predeterminada. Esto eliminará la burbuja de error nativo de los navegadores y podrá implementar una IU con estilo personalizada en todos los navegadores HTML5.

//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener(''invalid'', function(e){
    //prevent the browser from showing his error bubble
    e.preventDefault();
    //now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
    showError(e.target, $.prop(e.target, ''validationMessage'');
}, true);

El código anterior llamará a showError para todos los elementos inválidos en el formulario actual. Si desea hacer esto solo para el primer elemento no válido, puede hacer lo siguiente:

document.addEventListener(''invalid'', (function(){
    var isFirst = true;
    return function(e){
        //prevent the browser from showing his error bubble
        e.preventDefault();
        //now you can implement your own validation UI
        if(isFirst){
            showError(e.target, $.prop(e.target, ''validationMessage'');
            //set isFirst to false
            isFirst = false;
            //reset isFirst to true, so user can try to submit invalid forms multiple times
            setTimeout(function(){
                isFirst = true;
            }, 9);
        }
    };
})(), true);

En caso de que esté utilizando jQuery para su sitio, le recomendaría utilizar webshims lib . webshims lib implementa la validación de restricciones HTML5 en todos los navegadores (incluido IE6) y ofrece una extensión simple para generar un mensaje de validación sencillo y personalizable. El código JS se ve así:

$(document).bind(''firstinvalid'', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

La estructura HTML generada por $.webshims.validityAlert.showFor ve así:

<span class="validity-alert" role="alert"> 
    <span class="va-arrow"><span class="va-arrow-box"></span></span> 
    <span class="va-box">Error message of the current field</span> 
</span>

Answer 4

Puedes diseñar la burbuja de validación en webkit usando los siguientes pseudo-selectores:

::-webkit-validation-bubble
::-webkit-validation-bubble-top-outer-arrow
::-webkit-validation-bubble-top-inner-arrow
::-webkit-validation-bubble-message

Para los navegadores Mozilla todavía no hay una manera. Mozilla admite el x-moz-errormessage si desea cambiar el texto: https://developer.mozilla.org/en/HTML/element/input#section_5