Using CSS to visually validate form fields

With HTML5 we can use the required attribute to tell the browser that this field is required; based on this, we can take advantage of the presence of said attribute in the element and make the validations more friendly for the end user with the help of CSS; Let's see some examples.

Example 1: Visual validation of form fields with CSS

<form>
  <input required />
  <input type="submit" />
</form>

If the field is empty and we try to send the form; the browser will cancel sending it and display the following message:

try submitting the empty typed form and you will see the message.

However; if we want to customize the fields of the form that have the required attribute (show a yellow border -warning- for example); we could use a CSS rule like this:

/*We will show the required fields in yellow*/ form input:required { border:2px solid yellow; /* otras propiedades */ }

Example 2: Visual validation of form fields with CSS

We can use pseudo-class to do really cool stuff; For example, we can assign a color to the input that the user is editing at a given moment; red if the value being entered is not valid and green if the value being entered by the user is valid; For that we need the following rule in CSS:

/*Si el valor que el usuario escribe es valido, obtendra un color verde*/
form input[type="email"]:required:valid{
 border:2px solid green;
 /* otras propiedades */
}
/*caso contrario, el color sera rojo*/
form input[type="email"]:focus:required:invalid{
 border:2px solid red;
 /* otras propiedades */
}

And we will use the following form:

<form>
  <input required  type="email" />
  <input type="submit" />
</form>

We use the focus pseudo-class preceding the invalid pseudo-class because when the page is loaded the default field is empty; and therefore has the invalid state by default. By applying the previous style to the following form.

Example 3: Visual validation of form fields with CSS

Finally; a slightly more complete example which will request personal information:

/*Mostraremos los campos requeridos de color amarillo*/
    form input:required {
       border:2px solid yellow;
    /* otras propiedades */
    }
    /*Si el valor que el usuario escribe es valido, obtendra un color verde*/
    form input:valid{
        border:2px solid green;
        /* otras propiedades */
    }
    /*caso contrario, el color sera rojo*/
    form input:focus:invalid{
        border:2px solid red;
        /* otras propiedades */
    }

And we will use the following form:

<form>
    <input required type="text" name="nombre" placeholder="Primer nombre"/>
	<input type="text" name="nombre2" placeholder="Segundo nombre"/>
	<input required type="email" name="email" placeholder="Su correo electronico"/>
	<input required type="tel" name="tel" placeholder="Su teléfono"/>
	<input type="url" name="url" placeholder="Su pagina web" />
</form>

As we can see, there are fields that are required (first name - email - phone) and others that are not required (second name - web page). The first (required fields) will have a yellow border and will have the same behavior as the form. from example 2

Send