Mensajes de validación personalizados

message Personalización de errores
HTML5 permite personalizar los mensajes de error de validación mediante JavaScript
error_outline
oninvalid
Se dispara cuando la validación falla
edit
oninput
Se dispara al introducir datos
tips_and_updates Método clave
setCustomValidity() permite establecer un mensaje de error personalizado
code Ejemplo con JavaScript
<input type="email" name="correo" required
  oninvalid="this.setCustomValidity('Por favor, introduce un email válido')"
  oninput="this.setCustomValidity('')">
javascript Función JavaScript más completa
function validarEmail(input) {
  if (!input.validity.valid) {
    if (input.validity.valueMissing) {
      input.setCustomValidity('Este campo es obligatorio');
    } else if (input.validity.typeMismatch) {
      input.setCustomValidity('Introduce un email válido');
    }
  } else {
    input.setCustomValidity('');
  }
}
visibility Ejemplo visual