¿Cómo configurar mensajes de validación personalizados para formularios HTML?

Question 1

Tengo el siguiente formulario HTML: http://jsfiddle.net/nfgfP/

<form id="form" onsubmit="return(login())">
<input name="username" placeholder="Username" required />
<input name="pass"  type="password" placeholder="Password" required/>
<br/>Remember me: <input type="checkbox" name="remember" value="true" /><br/>
<input type="submit" name="submit" value="Log In"/>

Actualmente, cuando presiono Intro cuando ambos están en blanco, aparece un cuadro emergente que dice “Complete este campo”. ¿Cómo cambiaría ese mensaje predeterminado a “Este campo no se puede dejar en blanco”?

El mensaje de error del campo de tipo de contraseña es simplemente *****. Para recrear esto, asigne un valor al nombre de usuario y presione enviar.

Question 2

Aquí hay un código para mostrar un mensaje de error personalizado:

<input type="text" id="username" required placeholder="Enter Name"
       oninvalid="ths.setCustomValidity('Enter User Name Here')"
       oninput="setCustomValidity('')"/>

Esta parte es importante porque oculta el mensaje de error cuando el usuario ingresa nuevos datos:

oninput="setCustomValidity('')"

Nota la this La palabra clave no es necesaria para los controladores de eventos en línea, pero es posible que desee usarla de todos modos para mantener la coherencia.

Question 3

Usar setCustomValidity:

document.addEventListener("DOMContentLoaded", function() {
    var elements = document.getElementsByTagName("INPUT");
    for (var i = 0; i < elements.length; i++) {
        elements[i].oninvalid = function(e) {
            e.target.setCustomValidity("");
            if (!e.target.validity.valid) {
                e.target.setCustomValidity("This field cannot be left blank");
            }
        };
        elements[i].oninput = function(e) {
            e.target.setCustomValidity("");
        };
    }
})

I cambiado a vainilla JavaScript de Mootools como lo sugiere @itpastorn en los comentarios, pero debería poder calcular el equivalente de Mootools si es necesario.

Si setCustomValidity se establece en cualquier otra cosa que no sea la cadena vacía, hará que el campo se considere no válido; por lo tanto, debe borrarlo antes de probar la validez, no puede configurarlo y olvidarlo.

Como se señala en el comentario de @thomasvdb a continuación, debe borrar la validez personalizada en algún evento fuera de invalid de lo contrario, puede haber un pase adicional a través de la oninvalid controlador para limpiarlo.

Question 4

Es muy sencillo controlar los mensajes personalizados con la ayuda de HTML5 evento oninvalid

Aquí está el código:

<input id="UserID"  type="text" required="required"
       oninvalid="this.setCustomValidity('Witinnovation')"
       onvalid="this.setCustomValidity('')">

Esto es lo más importante:

onvalid="this.setCustomValidity('')"

Question 5

Nota: Esto ya no funciona en Chrome, no está probado en otros navegadores. Ver ediciones a continuación. Esta respuesta se deja aquí como referencia histórica.

Si cree que la cadena de validación realmente no debe establecerse por código, puede configurar el atributo de título del elemento de entrada para que diga “Este campo no se puede dejar en blanco”. (Funciona en Chrome 10)

title="This field should not be left blank."

Ver http://jsfiddle.net/kaleb/nfgfP/8/

Y en Firefox, puedes agregar este atributo:

x-moz-errormessage="This field should not be left blank."

Editar

Esto parece haber cambiado desde que originalmente escribí esta respuesta. Ahora, agregar un título no cambia el mensaje de validez, solo agrega un anexo al mensaje. El violín anterior todavía se aplica.

Editar 2

Chrome ahora no hace nada con el atributo de título a partir de Chrome 51. No estoy seguro en qué versión cambió esto.

Question 6

Es muy sencillo controlar los mensajes personalizados con la ayuda del HTML5 oninvalid evento

Aquí está el código:

User ID 
<input id="UserID"  type="text" required 
       oninvalid="this.setCustomValidity('User ID is a must')">

Question 7

Al armar y desarmar el setCustomValidity en el momento adecuado, el mensaje de validación funcionará sin problemas.

<input name="Username" required 
oninvalid="this.setCustomValidity('Username cannot be empty.')" 
onchange="this.setCustomValidity('')" type="text" />

solía onchange en lugar de oninput que es más general y ocurre cuando el valor se cambia en cualquier condición, incluso a través de JavaScript.

Question 8

He creado una pequeña biblioteca para facilitar el cambio y la traducción de los mensajes de error. Incluso puede cambiar los textos por tipo de error que actualmente no está disponible usando title en cromo o x-moz-errormessage en Firefox. Ir échale un vistazo en GitHuby dar retroalimentación.

Se usa como:

<input type="email" required data-errormessage-value-missing="Please input something">

Hay una demostración disponible en jsFiddle.

Editar

Editar 2

¿Ha sido útil esta solución?