Como cambiar los mensajes de error de los formularios web usando HTML 5 y CSS

Haz que en Chrome, Firefox, Safari y Opera todos los mensajes de error se vean igual al validar un formulario con seguir este tutorial.

Cuando el navegador se encuentre errores al validar el formulario veremos como aparece el típico mensaje de error avisandonos que hay que modificar. Por defecto todos las navegadores tienen sus propios estilos CSS predefinidos por lo que cada mensaje se verá distinto.

Este sería el resultado final.

Para empezar nuestro HTML tiene tiene que seguir una predeterminada estructura de etiquetas y atributos.


<form id="myForm" action="/" method="post">
  <fieldset>
    <label for="email">
     <input required type="email" id="email" name="email"> 
    </label>

    <label for="telNum">
     <input required pattern='\d+' type="tel" id="telNum" name="telNum"> 
    </label>
    <button type="submit">Submit</button>
  </fieldset>
  </form>

La etiqueta <input> debe de estar dentro de se correspondiente <label> y contener el atributo required.

Ahora tendremos que usar javascript, primero para deshabilitar los mensajes de error que salen por defecto y después para recuperar el texto de estos mensajes y mostrarlos tal y como queramos nosotros.

El último paso sería aplicar nuestro diseño usando CSS.

Para deshabilitar los mensajes de error debemos de usar preventDefault() en el evento invalid.


  var form = document.querySelector('form');
  form.addEventListener( 'invalid',function(event){
        event.preventDefault();
  },true);

Si ahora validases el formulario sin ningún dato verías que no ocurre nada.

Ahora el siguiente paso sería añadir los nuevos mensajes para cuando el usuario intente validar el formulario. Para ello tenemos que añadir un nuevo comportamiento al botón para cuando hagamos click.


  var button = form.querySelector('button');
  button.addEventListener('click', function(){

    // Seleccionamos todos los errores existentes
    var invalid = form.querySelectorAll(':invalid');

    // Reiteramos sobre ellos
    for(var i = 1; i < invalid.length;i++){

      // Creamos un div para cada error
      var error = document.createElement('div');
      // Accedemos al elemento padre del input 
      var label = invalid[i].parentNode;
      //Añadimos una clase CSS
      error.className = 'error';
      // A cada div le agregamos el texto del error
      error.textContent = invalid[i].validationMessage;
      // Añadimos el nuevo elemento al DOM
      label.insertBefore(error,invalid[i].nextSibling);
    };

    // Código para eliminar antiguos mensajes.
  });

El último paso que nos queda con javascript sería el de eliminar los mensajes para que no se vayan acumulando en la pantalla.


window.setTimeout(function(){

  var allErrors =document.querySelectorAll('.error');
  for(var i = 0;i < allErrors.length;i++){
    allErrors[i].remove(); 
  }
},5000);

Por terminar solo queda aplicar algo de CSS para que la cosa se vea mejor.


.error {
  position: relative;
  z-index: 1;
  padding: 10px;
  border-radius: 10px;
  color: white;
  width: 235px;
  text-align: center; 
  font-size: 12px;
  background: RGB(194, 46, 79);
}

.error::after {
    content: '';
    border-bottom: 15px solid RGB(194, 46, 79);
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    position: absolute;
    left: 45%;
    top: -14px;
}

En Github puedes ver la versión de vanilla javascript.

O sino ver el plugin jQuery prettyFormError que he hecho.

Stay tunned!

comments powered by Disqus