VALIDACIÓN CON JAVA SCRIPT

Que tal amigos en esta oportunidad, detallaremos algunos tipos de validaciones con java script,  métodos que fueron agregados en las  API de HTML5.

Para ponernos un poco en contexto una API (Application Programming Interface), por sus siglas en ingles, y que en español podríamos llamar, Interfaz de programación de aplicaciones.

Seguramente no le sorprenderá saber que, al igual que todos los aspectos de HTML5, los formularios HTML5 tiene su propia API para personalizar todos los aspectos de procesamiento y validación. 

Existen diferentes formas de aprovechar el proceso de validación en HTML5. 

Podemos usar los tipos de campo para activar el proceso de validación, como vimos en el 📚articulo sobre tipos de datos en formularios. 

Cada uno de estos tiene su propia forma de validación individual bastara con elegir el tipo de datos que estemos capturando para poner una restricción, como el de tipo email, o la restricción required para evitar que un  campo quede vació.

También podemos crear los diferentes tipos de campos especiales, usando pattern para personalizar requisitos de validación. 

Cuando se trata de aplicar mecanismos complejos de validación (por ejemplo, combinando campos o comprobando los resultados de un cálculo) deberemos utilizar los nuevos recursos provistos por esta API. 

setCustomValidity()

Con este método especificamos un error personalizado que mostrará un mensaje cuando el formulario es enviado.

Podemos crear mensajes personalizados para nuestros propios requisitos de validación usando el método

setCustomValidity(mensaje).

Realicemos un  ejemplo con esta aplicación.

Ejemplo:

Validación de campos con java script

Para que el proceso de validación sea omitido, el usuario debe llenar al menos un campo.

Caso contrario, el codigo de validación enviara el mensaje.

El codigo seria el siguiente.

Código de Validación

Para el ejemplo hemos utilizado codigo java script, dentro de HTML para que podamos apreciar de mejor manera la aplicación de este. 

Dos campos fueron creados para recibir el nombre y apellido del usuario. Sin embargo, el formulario solo será inválido cuando ambos campos se encuentran vacíos. El usuario necesita ingresar solo uno de los campos, su nombre o su apellido, para validar la entrada. En casos como éste no es posible usar el atributo required debido a que no sabemos cuál campo el usuario decidirá utilizar. Solo con código Javascript y errores personalizados podremos crear un efectivo mecanismo de validación para este escenario.