Formularios html 5 y JavaScript validation API , descubre lo que puedes hacer con tus formularios

Gracias a HTML 5 ahora tenemos a nuestra disposición nuevas formas de validar y asegurar la integridad de los datos ingresados por el usuario,  a continuación veremos algunas de ellas :

Pattern Attribute : Con esta propiedad puedes especificar una expresión regular para validar el texto en un input. Podemos ver un ejemplo en la w3school sobre un input donde requiere que el dato ingresado sea 3 letras en mayúsculas, aqui el  ejemplo.

Mas información sobre aqui

Maxlenght :  Si queremos limitar la cantidad de información ingresada en un input podemos usar este atributo, aqui el ejemplo 

novalidate : Este atributo es usado para indicar que un formulario no sera validado, no puedo imaginar un caso de uso para este atributo pero es bueno saber que existe, aquí el ejemplo 

Constraint Validation

Antes de que los datos de un formulario sean enviados al servidor, el navegador verifica los inputs para confirmar si son correctos con una serie de algoritmos y si encuentra algún error en ellos mostrara el siguiente error:

Existe algo llamado  "Constraint API" que son una serie de métodos y propiedades DOM de las cuales podemos hacer uso para un mayor control de nuestros formularios. 

willValidate : Este método nos indica si un input sera validado o no cuando el formulario sea enviado. Ejemplo : 

<input type="text" id="name" />
<script>
   document.getElementById('name').willValidate; //true
</script>

Validity: Devuelve un objecto javascript con propiedades útiles para determinar si un input es valido como: 

• patternMismatch : Devuelve true si el valor del input no concuerda con la expresion regular en el attributo pattern.

<input id="bar" pattern="[0-9]{4}" value="ABCD" />
<script>   
   document.getElementById('bar').validity.patternMismatch; //true
</script>

• rangeOverflow : Devuelve true si el valor del input es max alto que su atributo max.

<input id="bar" type="number" max="2" value="3" />
<script>
   document.getElementById('bar').validity.rangeOverflow; //true
</script>

• rangeUnderflow: Devuelve true si el valor del input esta por debajo de su atributo min.

<input id="bar" type="number" min="2" value="1" />
<script>
   document.getElementById('bar').validity.rangeUnderflow; //true
</script>

• typeMismatch :  Devuelve true si el valor del input no es del mismo tipo del especificado en el atributo type.

<input id="bar" type="url" value="foo" />
<input id="bar2" type="email" value="bar" />
<script>
   document.getElementById('bar').validity.typeMismatch; //true
   document.getElementById('bar2').validity.typeMismatch; //true
</script>

• valueMissing: Devuelve true si el input es tiene el atributo required y no tiene ningún valor

<input id="foo" type="text" required value="foo" />
<input id="bar" type="text" required value="" />
<script>
   document.getElementById('foo').validity.valueMissing; //false
   document.getElementById('bar').validity.valueMissing; //true
</script>

• stepMismatch: devuelve true si el valor del input no es acorde con el especificado en el atributo step.
• tooLong: Devuelve true si el valor del input es mayor que el especificado en el atributo maxlength, una cosa interesante aqui es que los navegadores no permiten que esto pase por efecto.
• valid : Devuelve true si todas las condiciones anteriores son false.

<input id="valid-1" type="text" required value="foo" />
<input id="valid-2" type="text" required value="" />
<script>
   document.getElementById('valid-1').validity.valid; //true
   document.getElementById('valid-2').validity.valid; //false
</script>

validationMessage : Esta propiedad contiene el mensaje que se muestra cuando un input no cumple con las validaciones del formulario.

<input type="text" id="foo" required />
<script>
   document.getElementById('foo').validationMessage;
   //Chrome  --> 'Please fill out this field.'
   //Firefox --> 'Please fill out this field.'
   //Safari  --> 'value missing'
   //IE10    --> 'This is a required field.'
   //Opera   --> ''
</script>

checkValidity : Este es un método que devuelve true si un elemento de formulario contiene datos validos.(input, textarea, ect)

<form id="form-1">
   <input id="input-1" type="text" required />
</form>
<form id="form-2">
   <input id="input-2" type="text" />
</form>
<script>
   document.getElementById('form-1').checkValidity();  //false
   document.getElementById('input-1').checkValidity(); //false
   document.getElementById('form-2').checkValidity();  //true
   document.getElementById('input-2').checkValidity(); //true
</script>

Cada vez que un elemento de formulario es verificado con "checkValidity" y falla, un evento "invalid" es disparado en ese elemento. Podemos usar este evento para hacer cualquier cosa que queramos. También como no existe el evento "valid" en su lugar se usa "change".

<form id="form-1">
   <input id="input-1" type="text" required />
</form>
<script>

document.getElementById('input-1').addEventListener('invalid', function() {//you code here, whatever you wnat here
}, false);

document.getElementById('input-1').addEventListener('change', function(event) {
   if (event.target.validity.valid) {
       //Field contains valid data.
   } else {
       //Field contains invalid data.
   }
}, false);

</script>

Datalist : Es un elemento para sugerencias muy al estilo de autocompletado, ejemplo.

autocomplete : Con este atributo puedes desactivar el autocompletado del navegador, ejemplo.

autofocus: puedes usar este atributo para que un elemento de formulario tome el foco apenas la vista sea cargada, pero solo puedes asignarlo a uno que sera el que por defecto sera el primero a llenar, ejemplo.

stepUp: Método que incrementa al siguiente valor logico en inputs date y numeric.

stepDown : Método que decrementa al siguiente valor lógico en inputs date y numeric.

document.getElementById('date').stepUp()document.getElementById('date').stepDown()

valueAsNumber: Propiedad que devuelve el valor de un input como numero, para no tener que usar a cada momento parseInt() o parseFloat().

document.getElementById('date').valueAsNumber

valueAsDate: Propiedad que devuelve el valor como un objecto date, ejemplo.

Existen casos donde algunas veces tenemos que agregar valores adicionales al formulario, pero que no se tienen que mostrar al usuario, lo mas común es usar un "input hidden", pero ahora puedes usar el nuevo objecto formData como lo describen en el siguiente link :

https://developer.mozilla.org/en-US/docs/Web/Guide/Using_FormData_Objects

Básicamente seria de la siguiente manera sin usar inputs hidden :

var formElement = document.getElementById("myFormElement");
formData = new FormData(formElement);
formData.append("serialnumber", serialNumber++);

Con el mismo objecto formData puedes crear formularios al vuelo y enviar los datos al servidor por ajax sin que exista el formulario en el DOM. puedes ver el ejemplo en el link anterior.

Propiedades y metodos adicionales en los siguientes links.

link: http://www.html5rocks.com/en/tutorials/forms/html5forms/

link : http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/