Hoy vamos a escribir sobre los formularios de contacto y cómo validarlos usando JavaScript.
El formulario de contacto parece ser una de las características principales de toda página web básica. Es una gran manera de animar a sus visitantes a que se pongan en contacto con usted, añadiendo un formulario que es agradable de ver, simple de usar y fácil de enviar. Un buen formulario web debería seguir en cierta medida el estilo habitual conocido y popular, de modo que sus usuarios ya conozcan cómo rellenar sus campos de entrada y nunca tengan que pensar dos veces en qué tipo de datos se requieren y dónde. Es decir, el usuario nunca debe preguntarse qué campos son obligatorios y cuáles son opcionales y cómo rellenarlos correctamente y cómo presentar el formulario con éxito.
Reglas de creación del formulario
Antes de empezar a crear la forma en sí, es una buena práctica tomarse el tiempo y pensar en qué tipo de información le va a pedir al usuario. Y también, ¿qué campos van a ser requeridos y cuáles pueden ser enviados vacíos? ¿Hay alguna restricción en cuanto al formato de los datos que introduce?
La complejidad de un formulario HTML puede ir desde un simple formulario de contacto en el que sólo pedimos al usuario que rellene su nombre, correo electrónico, teléfono y un mensaje o puede ser un formulario más elaborado como es el caso del registro de un nuevo usuario, por ejemplo.
Queremos mejorar nuestro formulario dando al usuario información interactiva en tiempo real sobre si está rellenando los campos de entrada correctamente, y hacerle saber si falta algún campo o si es incorrecto.
Validación de datos
Otro aspecto es la cuestión de la validación de los datos. Cada vez que necesites trabajar con datos generados por algún usuario, DEBES validar que los datos que él está enviando están de acuerdo con tus expectativas. Esto significa que hay condiciones, como por ejemplo un campo de entrada de correo electrónico debe contener definitivamente el signo @ y luego un . seguido del nombre de dominio. O un número de teléfono debe estar compuesto exclusivamente por el signo + y números. Además, tal vez desee comprobar que la longitud de la palabra que ha introducido el usuario es mayor que un determinado número de caracteres, por lo que, por ejemplo, tal vez no desee que las personas que envíen palabras más cortas que digamos 3 caracteres como cuerpo del mensaje.
Otro efecto interesante de la validación de sus datos en la parte delantera del código de su sitio web es la ventaja añadida de la protección contra los ataques cibernéticos. Piense siempre que si hay campos de entrada en su página, un agente malicioso como un bot podría venir y atacar el código, la integridad o la disponibilidad de su sitio y así intentar piratear su web. La mejor manera de evitar que ocurran cosas como esta es mediante una doble prueba de hacker de su código mediante el uso de mecanismos de validación del front end como la validación de JavaScript, así como del back end, la validación de datos del lado del servidor. Estos dos deberían hacer un dúo de protección para dificultar al máximo la infiltración de los atacantes en su sitio.
Accesibilidad del formulario de contacto
Cuando se diseña un formulario de contacto, es de gran utilidad hacer uso de los atributos especiales del HTML para que el formulario sea más accesible. Con esto nos referimos a asignar correctamente el orden de los campos de entrada para que el formulario pueda ser navegado fácilmente usando sólo el teclado. También se puede mejorar la facilidad de uso utilizando el elemento de la etiqueta, de modo que los campos de entrada se centren al hacer clic en el título asignado en la etiqueta.
Integración de Bulma
¿Cómo podemos hacer uso de BULMA en el caso de diseñar formularios de contacto html?
Bulma es un framework, una biblioteca similar a Bootstrap que si aprendes a usar puede simplificar la parte css de tu trabajo al diseñar una página web. Haremos uso especialmente de la sección de formularios de Bulma. Está basada en flexbox, así que la usamos para posicionar nuestros elementos en la pantalla, específicamente nuestros iconos. En nuestro pequeño ejemplo, las clases serán los modificadores que le dirán a los iconos dónde cambiar o cómo deben verse y eso hará nuestra vida un poco más fácil.
Has-icons-right, has-icons-left, is-danger, is-small, is-right, etc.
Nuestro objetivo es crear un simple formulario de contacto, en el que se utilizará la siguiente marca HTML:
<section class="section" id="contact"> <div class="container is-max-desktop"> <h2 class="title">CONTACT</h2> <h3>If you wish to get in touch with Majka, send her a message</h3> <form accept-charset="utf-8" action="sendmail.php" method="post" enctype="multipart/form-data"> </form> </div> </section>
Ahora esto por sí solo no será suficiente, también queremos tener campos de entrada y algunos botones, así que añadimos dentro del elemento <form> lo siguiente - nombre, correo electrónico, número de teléfono y campos de mensaje y un botón de envío.
<!--Name field--> <div class="field"> <label class="label" for="name">Your Name</label> <div class="control has-icons-right"> <input class="input needs-validation inputNameField" type="text" name="name" placeholder="name maximum 20 characters" value="" id='inputName' /> <span class="icon is-small is-right"> <i id='nameCheckIcon' class="fas fa-exclamation-triangle"></i> </span> </div> </div> <!--Email field--> <div class="field"> <label class="label" for="email">Email</label> <div class="control has-icons-left has-icons-right"> <input class="input needs-validation inputEmailField" type="email" name="email" placeholder="your@email" value="" id='inputEmailField' /> <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span> <span class="icon is-small is-right"> <i id='emailCheckIcon' class="fas fa-exclamation-triangle"></i> </span> </div> <p id="emailActionHint" class="help is-danger nezobrazovat">Please enter a valid email so Majka can reach you</p> </div> <!--Phone number field--> <div class="field"> <label class="label" for="number">Phone Number</label> <div class="control has-icons-left has-icons-right"> <input class="input is-warning" type="text" name="number" placeholder="" value="" /> <span class="icon is-small is-left"> <i class="fas fa-phone"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-exclamation-triangle"></i> </span> </div> </div> <!--Message field--> <div class="field"> <label class="label">Your Message</label> <div class="control"> <textarea class="textarea" name="message" placeholder=""></textarea> </div> </div> <!--Submit checkbox--> <div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox" /> I agree to the <a href="#">terms and conditions</a> </label> </div> </div> <!--Submit button--> <div class="field is-grouped"> <div class="control"> <button class="button is-light" id="submitButton" disabled="true">Submit</button> </div> </div>
Como pueden ver, tenemos cuatro campos de entrada diferentes:
Esta línea la añadimos al final del cuerpo, pero antes de cerrar el elemento </body>. Esto hará que el javascript se cargue después de que se ejecute el código HTML, o podemos añadir la propiedad "async defer" al <script>, lo que hará el truco y entonces tu script podrá ser colocado en cualquier lugar de la página y aún así el script se ejecutará al final como queremos.
<script src="js/main.js?v6" async defer></script>
Nota: Si preguntas qué es "?v6" detrás del archivo .js, esa es la versión del código JS, cuando necesites que tu editor de código lea el último código no almacenado, sólo tienes que aumentar el número de la versión y cargará tus últimos cambios en el código.
Y ahora vamos a configurar la parte más interesante - el código JavaScript para comprobar el contenido de los campos y validar su estado:
Primero podemos definir constantes que representarán nuestros elementos con los que queremos trabajar.
const ourParallax = document.getElementById('parallax')
const parallaxInstance = new Parallax(ourParallax)
const submit = document.getElementById('submitButton')
const inputName = document.getElementById('inputName')
const inputEmail = document.getElementById('inputEmailField')
const iconName = document.getElementById('nameCheckIcon')
const iconEmail = document.getElementById('emailCheckIcon')
const MAXCHARNAMEFIELD = 20
const MINCHARNAMEFIELD = 3
Nota: Si necesita leer sobre cómo seleccionar diferentes elementos DOM para su código JS, tenemos un excelente artículo sobre el tema aquí : https://www.ma-no.org/en/programming/javascript/first-steps-into-javascript-modifying-the-DOM.
Pero continuemos. Ahora hemos creado Event Listeners que estarán esperando alguna acción específica.
// EVENT LISTENERS
document.addEventListener('change', event => {
if (event.target.matches('.inputNameField')) {
validateName()
} else if (event.target.matches('.inputEmailField')) {
validateEmail(event.target.value)
} else {
//nothing
}
}, false)
Para describirlo mejor - en toda la página tenemos un listener y cuando algo va a cambiar - como está definido dentro de los paréntesis se establece en qué evento -> en 'cambio', ejecutará la función de flecha. Dentro de la función de la flecha tenemos una estructura de control de flujo IF para resolver si el evento ocurrió en algunos de los siguientes elementos que tenemos.
Por ejemplo, si hay algún evento de 'cambio' - escribimos algo en el campo de entrada del elemento HTML que tiene la clase CSS .inputNameField, la IF será verdadera y se ejecutará el siguiente código. Y el código que tenemos en ejecución es la función validarNombre() - es hora de describir su código ahora :
Validación del nombre
function validateName() {
var regexString = /w?s?w/g; //palabras separadas por el espacio
const iconName = document.getElementById('nameCheckIcon')
const conditions =
(inputName.value.length > MINCHARNAMEFIELD) &&
(inputName.value.length < MAXCHARNAMEFIELD) &&
(inputName.value != null) &&
(regexString.test(inputName.value)) //test for regex string
console.log(regexString.test(inputName.value))
if (conditions) {
// input box color
inputName.classList.remove('is-danger')
inputName.classList.add('is-success')
// icon type
iconName.classList.remove('fa-exclamation-triangle')
iconName.classList.add('fa-check')
// console.log("icon :" + icon.classList.value)
//now we call submit button test
nameValidated = true
submitCheck()
} else {
// input box color
inputName.classList.remove('is-sucess')
inputName.classList.add('is-danger')
// icon type
iconName.classList.remove('fa-check')
iconName.classList.add('fa-exclamation-triangle')
nameValidated = false
}
}
Primero definimos la variable con expresión regular.
También añadimos dos constantes a la definición de las variables al principio, que representarán los caracteres mínimos y máximos que queremos que tenga nuestro campo de entrada. Esta es la forma correcta de hacerlo, de esta manera no tendrás ninguna constante no descrita en tus condicionales, los llamados "números mágicos".
const MAXCHARNAMEFIELD = 20 const MINCHARNAMEFIELD = 3
Hacemos una nueva variable al icono con el que trabajaríamos, hasta ahora el icono que pertenece al campo de entrada del nombre tiene clase Bulma 'fa-exclamation-triangle', y lo cambiaremos cuando el campo de entrada esté correctamente rellenado.
A continuación tenemos una serie de condiciones que queremos que se comprueben - input se comprobará contra todas ellas y cuando todas sean booleanas verdaderas, para el elemento establecido a la variable inputName = document.getElementById('inputName') -declarada anteriormente, quitamos la clase 'is-danger' y añadimos la clase 'is-success'. Esto cambiará el color del campo a verde. De manera similar, al icono quitamos 'fa-exclamation-triangle' y añadimos 'fa-check', lo que hará que se muestre ese icono de comprobación.
Declaramos nuevas variables con estado por defecto = false ,añadidas al inicio del archivo donde tenemos otras variables.
var nameValidated = false var emailValidated = false
También queremos establecer una nueva variable cuando el campo de entrada del nombre se rellena correctamente a "true". Esto será útil cuando lleguemos al botón de envío más tarde. Lo último es llamar a la función submitCheck() cada vez que el cambio ocurra en el formulario. Ejecutará esa función pero hasta ahora podemos ignorarla hasta más adelante. De acuerdo, deberíamos tener esto:
Validación del correo electrónico
A continuación tenemos la función validarEmail(value), que será llamada cuando ocurra algún evento de 'cambio' en este elemento HTML, ¿recuerdas?
else if (event.target.matches('.inputEmailField'))
Esta función también utiliza expresiones regulares para evaluar si la entrada está de acuerdo con el correo electrónico habitual. Pasamos el valor del campo de entrada cuando lo rellena un usuario a la función al llamarlo.
validateEmail(event.target.value)
function validateEmail(value) {
const iconEmail = document.getElementById('emailCheckIcon')
const emailParagraph = document.getElementById('emailActionHint')
if (validateRegexString(value)) {
// input box color
inputEmail.classList.remove('is-danger')
inputEmail.classList.add('is-success')
// icon type
iconEmail.classList.remove('fa-exclamation-triangle')
iconEmail.classList.add('fa-check')
emailParagraph.style = 'display:none'
emailValidated = true
submitCheck()
} else {
// input box color
inputEmail.classList.remove('is-sucess')
inputEmail.classList.add('is-danger')
// icon type
iconEmail.classList.remove('fa-check')
iconEmail.classList.add('fa-exclamation-triangle')
emailParagraph.style = 'display:block'
emailValidated = false
}
}
Describamos la función.
Declaramos como variables dos elementos, icono y párrafo con el texto que queremos mostrar, este párrafo está momentáneamente oculto (estilo CSS display:none) por lo que al cargar la página por defecto no se muestra el texto.
A continuación tenemos una condición en la que hemos llamado a otra función añadida al código - validarRegexString(valor), que devuelve true cuando la cadena introducida en la entrada es validada por esta función.
function validateRegexString(email) {
const regexString = /^(([^<>()[].,;:s@"]+(.[^<>()[].,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/
return regexString.test(String(email).toLowerCase()) // true|false
}
Bueno, si la condición se cumple y tenemos por ejemplo un correo electrónico válido, válido en el sentido de que los caracteres introducidos se ven como una dirección de correo electrónico, el código eliminará el color rojo del campo de entrada, añadirá el color verde (clases Bulma), desde el icono elimina el triángulo de exclamación y añade el pictograma de comprobación. También evita que se muestre cualquier texto de advertencia que hayamos preparado en el elemento <p> con id = 'emailParagraph'.
Al final, como en la anterior función validarNombre(), hemos añadido emailValidado = true y llamado a la función submitCheck().
Botón de envío
El siguiente y último elemento que mostraremos es cómo hacer que el botón de envío esté desactivado y sólo se habilite después de que se rellenen los datos que queremos. Así, por ejemplo, podemos hacer que el botón se desactive a menos que haya un campo de entrada lleno de nombre y correo electrónico, pero no el teléfono y el mensaje de texto, que podrían estar vacíos. Vayamos al código.
Recuerde que tenemos dos variables definidas por defecto, nameValidated y emailValidated, y podemos usarlas en la condición de la función submitCheck() - será llamada cada vez que el campo de entrada de nombre y email sea validado con éxito. Cuando ambos se validen y en nuestras variables el valor se establezca en true, el botón se desbloqueará eliminando el atributo 'disabled' que tiene por defecto.
function submitCheck() {
const emailParagraph = document.getElementById('emailActionHint')
console.log(nameValidated, emailValidated)
if (nameValidated && emailValidated) {
submit.disabled = false; //button is no longer no-clickable
submit.removeAttribute("disabled"); //detto
} else {
emailParagraph.style = 'display:block' //email warning shows up
}
}
Conclusión
¡Y eso es todo! Hemos diseñado con éxito un sencillo formulario de contacto que puede ser (y de alguna manera debería ser) utilizado en cualquier página web. El marcado HTML hace un uso correcto de los atributos de mejora de la accesibilidad. Gracias al marco de trabajo Bulma CSS, nuestro formulario tiene un aspecto limpio y elegante, con iconos y colores que proporcionan al usuario un feedback sobre si el formulario se ha rellenado correctamente. La parte de validación es posible gracias a nuestro sencillo script JS vainilla, que utiliza expresiones regulares y funciones matemáticas simples para confirmar que los datos introducidos son válidos.
