Para aquellos que se encuentran aprendiendo Typescript con el objetivo de mejorar la calidad de su Javascript, o son meros curiosos, voy a dejar un ejemplo completo donde se valida un sencillo campo: un nombre.
Entre sus poderes nos encontramos.
- El nombre no debe estar vacío.
- El nombre no debe ser un número.
- Mostrar mensajes de error dentro de un <ul>.
- Enviar formulario si pasa las validaciones.
HTML
<form id="formulario">
<p>
<ul id="errores"></ul>
</p>
<p>
<label>
Nombre:
<input type="text" name="nombre" id="nombre">
</label>
</p>
<p>
<input type="button" id="guardar" value="Guardar">
</p>
</form>
Typescript
//======================================================================
// VARIABLES
//======================================================================
let formulario: HTMLFormElement = document.querySelector('#formulario')
let erroresUl: HTMLUListElement = document.querySelector('#errores')
let inputNombre: HTMLInputElement = document.querySelector('#nombre')
let botonGuardar: HTMLButtonElement = document.querySelector('#guardar')
//======================================================================
// FUNCIONES
//======================================================================
/**
* Método que valida y enviar el formulario
*/
function enviarFormulario(): void {
// Variables
let errores: string[] = []
// Validamos nombre
//// ¿Es un numero?
if (isNaN(parseInt(inputNombre.value))) errores.push('El nombre no puede ser un número')
//// Es obligatorio
if (inputNombre.value === '') errores.push('El nombre es obligatorio')
// Mostramos los errores
imprimirErrores(errores)
// Enviamos formulario
if (errores.length === 0) formulario.submit()
}
/**
* Imprime todos los errores en el UL
* @param errores Array - Frases de error
*/
function imprimirErrores(errores: string[]): void {
// Limpiamos los errores anteriores en HTML
erroresUl.textContent = ''
// Generamos todos LI con su mensaje
errores.forEach(function(mensaje) {
// Creamos nuevo LI
let nuevoLi = document.createElement('li')
nuevoLi.textContent = mensaje
// Lo añadimos dentro de nuestro UL
erroresUl.appendChild(nuevoLi)
})
}
//======================================================================
// EVENTOS
//======================================================================
botonGuardar.addEventListener('click', enviarFormulario)
{{ comments.length }} comentarios