Grupos Form

Encierran a un conjunto de elementos que permiten definir un modelo de formularios provistos por bodystyle para la correcta visualización de los formularios.

Form Group

Vamos a ver un ejemplo de como definir este tipo de modelos en la práctica con un ejemplo concreto.
Para realizar esto vamos a envolver a los elementos con una clase .form-group que permitira definir el modelo.

Ej: Alberto
Ej: Perez 
    

        

            

                
                
                Ej: Alberto
            

            

                
                
                Ej: Perez

Ejemplo de Formulario

Con esta idea ahora veremos un ejemplo de un formulario completo con diferentes campos para poder ingresar los datos suministrados por el usuario.

Registro de Usuario

Su primer nombre Ej: Alberto
Su primer apellido Ej: Perez
Ej: jhondoe@mail.com
De 8 a 16 con mayusculas, minusculas y caracter.
Repetir la clave. 
    

        
Registro de Usuario

        

            

                

                    
                    
                    Su primer nombre Ej: Alberto
                

                

                    
                    
                    Su primer apellido Ej: Perez
                

                

                    
                    
                    Ej: jhondoe@mail.com
                

                

                    
                

                

                    
                    
                    De 8 a 16 con mayusculas, minusculas y caracter.
                

                

                    
                    
                    Repetir la clave.
                

                

                    
                

            

        

    


        document.getElementById("repetir, #pass, #nombre, #apellido, #email").addEventListener("keyup", () => {
            
            let clave = document.getElementById("pass").value
            let rep = document.getElementById("repetir").value
            if( 
                document.getElementById("nombre").value    !== ""  &&  document.getElementById("nombre").value    !== undefined   && 
                document.getElementById("apellido").value  !== ""  &&  document.getElementById("apellido").value  !== undefined   &&
                document.getElementById("email").value     !== ""  &&  document.getElementById("email").value     !== undefined   &&
                document.getElementById("pass").value      !== ""  &&  document.getElementById("pass").value      !== undefined   &&
                clave === rep
            )
            {
                document.getElementById("enviar").classList.remove("desactivado")
            }   
            else 
            {
                document.getElementById("enviar").classList.add("desactivado")
            }
        })
En el ejemplo anterior se utilizaron la funcionalidad Desactivado y algunas validaciones simples para poder brindarle lógica al formulario. Cuando los datos no están dentro de los parámetros de validación el botón enviar permanece desactivado.
`r`n