Mira Cómo Hacerlo

Solución: Cómo validar un formulario con Bootstrap Validator con Javascript paso a paso

Escrito por: Adrian Almiñana Navarro
10 enero 2021

En este artículo enseñaremos una de las herramientas más usadas por los desarrolladores web de front end. La cual facilita el proceso de maquetación, con herramientas que son compatibles con los lenguajes de programación esenciales del sector como los son HTML, CSS y JavaScript. Por lo tanto es indispensable tanto para un desarrollador novato como experimentado conocer sus funciones básicas, en este caso te enseñaremos como validar un formulario con Bootstrap.

Las reglas de validación para los atributos estándar de HTML5 son manejadas completamente por el navegador usando la API de Validación de Restricciones de HTML5. Como tal, este complemento no tiene el control de cosas como lo que califica como una dirección de correo electrónico o URL válida.

Bootstrap también tiene disponible una gran cantidad de macros en front end, lo que le da otras posibilidades en el momento de maquetar. Algo similar como ocurre con preprocesadores como Less en CSS que posee características similares.

¿Cómo Validar un Formulario con Bootstrap Validator?

Este complemento se adhiere a las convenciones establecidas por los complementos principales de jQuery de Bootstrap, así que asegúrese de verificarlos para comprender mejor los objetivos y el diseño de este complemento. La validación de formularios se puede habilitar en el marcado a través de la api de datos o de JavaScript. Habilite automáticamente la validación de formularios agregando data-toggle = "validador" a su elemento de formulario.

Índice()
  1. ¿Cómo validar formulario en Bootstrap?
    1. Con Restricciones Adicionales a Través del Atributos max, min y Atributos
    2. Atributos no estándar
    3. Compatibilidad entre navegadores
    4. Campos validados
  2. Ventajas de usar Bootstrap

¿Cómo validar formulario en Bootstrap?

La Validación del formulario se puede habilitar en el marcado a través de la api de datos o a través de JavaScript. Habilite automáticamente la validación de formularios agregando data-toggle = "validador".

<form role = "form" data-toggle = "validator">

Las reglas de validación se especifican en las entradas de formulario a través de los siguientes atributos estándar de HTML5:

</form>

type = "email"
type = "url"
type = "number "

Con Restricciones Adicionales a Través del Atributos max, min y Atributos

  • Para los tipos de entrada de texto, búsqueda, tel, url o correo electrónico requeridos
pattern=" Reg (ular)? Exp (ression)? "

crear validacion de formulario con bootstrasp

Atributos no estándar

  • Asegurar que dos campos coincidan, por ejemplo, confirmaciones de contraseña
data-match = "# inputToMatch"
  • Imponer una cantidad mínima de caracteres
 data-minlength = "5"
  • Realizar una solicitud AJAX para determinar si el campo es
 data-remote = "/ path / to / remote / validator"
  • Válido o no, asegúrese de dar a la entrada un atributo de nombre
/ path / to / remote / validator? <name> = <value>

Compatibilidad entre navegadores

Debido a que este complemento depende de la API de Validación de Restricciones de HTML5, Internet Explorer 9 y mayores no son compatibles.

Campos validados

De forma predeterminada, el validador solo validará los campos que están presentes cuando se inicializa el complemento.

Si su formulario tiene un conjunto dinámico de campos, deberá llamar a $ (...). Validator ('actualizar') para informar al complemento que el conjunto de campos a validar ha cambiado.

$ .fn.validator.Constructor.INPUT_SELECTOR = ': input: not ([type = "hidden"], [type = "submit"], [type = "reset"], button)'

Puede anular este valor desde adentro su código si necesita cambiar este comportamiento predeterminado. Alternativamente.

Puede agregar data-validate = "true" / data-validate = "false" a una entrada específica para forzar su inclusión / exclusión en el conjunto de campos validados.

aprende a crear formularios con bootstrap y javascript

Ventajas de usar Bootstrap

Bootstrap es conocido por la facilidad de crear componentes de una web, y la facilidad de maquetación que generalmente se realizan con HTML5 desde la semántica  y sirve como guía para aplicar buenas prácticas y diferentes estándares. Al haber sido creado por Twitter nos da ciertas garantías, ya que sabemos que desde el inicio está bien pensado y se ha trabajado mucho. Algunas de sus ventajas más conocidas son:

Puede tener un sitio web bien organizado de forma rápida e intuitiva: si ya sabe cómo diseñarlo, la curva de aprendizaje lo hará asequible y rápido de usar. Esto es ideal sobre todo si se empieza en el mundo de la programación, ya que nos facilitara el trabajo.

Permite el uso de muchos elementos web: desde iconos hasta menús desplegables, una combinación de HTML5, CSS y JavaScript. No importa en qué creemos, no importa el equipo, la escala o la resolución, el diseño responderá. Por lo que los límites dependen de nuestra imaginación pudiendo aplicar todo lo que requiere una página web y cualquier desarrollador front end debería conocer.

Sistema de cuadrícula: el diseño por columna nunca ha sido tan fácil. Además, son muy configurables. Está bien integrado con la biblioteca principal de JavaScript.

Subir