Validación de formularios HTML usando BULMA y vanilla JavaScript



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.

Bulma_form_example

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="[email protected]" 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:

Contact_form_basic

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:


Forms_validation_input_name

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 = /^(([^<>()[].,;:[email protected]"]+(.[^<>()[].,;:[email protected]"]+)*)|(".+"))@(([[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'.

Form_validation_input_email

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.

 


Form_validation_submit_button_disabled

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
  }
}

Form_validation_submit_button_enabled

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.

 
by Tibor Kopca Date: 31-12-2020 JavaScript Formularios Bulma desarollo web webdev validacion de datos visitas : 1787  
 
Tibor Kopca

Tibor Kopca

From tinkering with computers as a teenager, through a career in datacenter he stepped into web development with full force and started coding. Absorbs all information like a sponge.
Fan of aerospace, engineering, information technologies and watches.

 
 
 

Artículos relacionados

Cómo enviar un correo electrónico desde un formulario de contacto HTML

En el artículo de hoy vamos a escribir sobre cómo hacer un formulario que funcione y que al pulsar ese botón de envío sea funcional y envíe el correo electrónico…

Cómo hacer un sitio web multilingüe sin redireccionamiento

Hoy, vamos a hablar de cómo implementar un simple selector de idioma en el sitio web estático o básico, sin necesidad de ningún backend o llamadas a la base de…

Comenzando con Bootstrap-Vue paso a paso

Hoy te mostraremos cómo usar BootstrapVue, describiremos el proceso de instalación y mostraremos la funcionalidad básica. El proyecto está basado en el framework CSS más popular del mundo - Bootstrap, para…

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la…

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch

Por qué los desarrolladores de JavaScript deberían preferir Axios a Fetch En mi artículo anterior, "Usando la Api Fetch Para Hacer Llamadas Ajax", hablé de los fundamentos de la API Fetch.…

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio…

Los mejores selectores de fechas para Bootstrap y tu aplicación

Los selectores de fecha son widgets que permiten a los usuarios elegir una sola fecha o rango de fechas y horas. Es un elemento habitual para todo usuario de Internet,…

Cómo usar el efecto Parallax.Js en tu sitio web

Hoy vamos a escribir sobre el efecto de parallax, similar al desplazamiento de parallax, y cómo implementarlo para mejorar su página de aterrizaje. En webdev, dicen que primero el móvil…

Usando la API FETCH para hacer llamadas AJAX - Una promesa cumplida

En este artículo hablamos sobre lo que son las llamadas AJAX y cómo utilizarlas de forma tradicional, utilizando el objeto XMLHttpRequest (XHR). En resumen, gracias a las llamadas AJAX una…

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre…

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y…

Javascript: los operadores Spread y Rest

En el artículo de hoy vamos a hablar de una de las características de la versión ES6 (ECMAScript 2015) de JavaScript que es el operador Spreadasí como el operador Rest. Estas…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración