Basic Validation HTML5 Form
Using HTML5 capabilities about form validation and CSS I've built an example with Font Awesome, avoiding JS por validating and submitting the form.
Using HTML5 capabilities about form validation and CSS I've built an example with Font Awesome, avoiding JS por validating and submitting the form.
<!--Font Awesome in header -- >
<!-- Font Awesome in header --><link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Form --><form><div>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,48}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð ,.'-]{2,64}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="correo">Email</label>
<input type="email" name="correo" id="correo" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="usuario">Usuario</label>
<input type="text" name="usuario" id="usuario" pattern="^([a-z]+[0-9]{0,2}){5,12}$" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div>
<label for="pass">Contraseña</label>
<input type="password" name="pass" id="pass" pattern="[A-Za-z0-9!?-]{8,12}" required/>
<i class="fa fa-check check-ok"></i>
</div>
<div><button type="submit">Enviar</button>
</div></form>/* Basic Styles */
/* Basic Styles */form {width: 25em;
}
div {margin: .25em;
}
label {display: inline-block;
width: 6em;
}
input {width: 12em;
}
button {display: block;
margin: 0 auto;
}
/* Validation Styles */input:valid {
background-color: #BBFFF0;
}
.check-ok {color: lime;
}
input:invalid ~ .check-ok {
display: none;
}
input:valid ~ .check-ok {
display: inline;
}