Cómo deshabilitar el estilo de validación de bootstrap 4 desde controles válidos

Siéntete libre de divulgar nuestros post y códigos en tus redes sociales, necesitamos tu ayuda para hacer crecer nuestra comunidad.

Solución:

A mí, por mi parte, no me gusta anular el estilo CSS, por lo que también podría optar por especificar qué campos validar en lugar de todo el formulario.

Agrega una clase a tu .form-group elemento (p. ej. .validate-me)

    

        

            Name
            

                
                

                    Please enter the name.
                
            
        
        

            Address:
            

                
            
        
        

            
        
    

Ahora cambie ligeramente su JavaScript, recupere todos los form-groups con el validate-me clase y en lugar de llamar form.classList.add('was-validated') recorrer todos los grupos de formularios capturados y agregar was-validated a ellos en su lugar.

window.addEventListener('load', function () 
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');

                // Get all form-groups in need of validation
                var validateGroup = document.getElementsByClassName('validate-me');

                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) 
                    form.addEventListener('submit', function (event) 
                        if (form.checkValidity() === false) 
                            event.preventDefault();
                            event.stopPropagation();
                        

                        //Added validation class to all form-groups in need of validation
                        for (var i = 0; i < validateGroup.length; i++) 
                            validateGroup[i].classList.add('was-validated');
                        
                    , false);
                );
            , false);

Puede anular css de la validación válida. Cuando hace clic con el botón derecho en la casilla de verificación verde y elige inspeccionar, puede ver qué clase está causando la luz verde

Por lo tanto, debe especificar no heredar los de bootstrap. El código debería ser así:

  
    
    
    
    
    
    
    
    
    
    



    

        

            Name
            

                
                

                    Please enter the name.
                
            
        
        

            Address:
            

                
            
        
        

            
        
    

Lo que agregué es la etiqueta de estilo y las opciones de CSS debajo de la etiqueta principal.

Es posible que desee ver esta respuesta.

Específicamente, en lugar de agregar .was-validated a todo el formulario, solo agregue .is-invalid a los elementos del formulario que tienen el :invalid pseudo-clase.

Este código debería funcionar en su caso:

for (var i = 0; i < validateGroup.length; i++) 
    var invalidGroup = validateGroup[i].querySelectorAll(":invalid");
    for (var j = 0; j < invalidGroup.length; j++) 
        invalidGroup[j].classList.add('is-invalid');
    

Aquí tienes las reseñas y puntuaciones

Al final de todo puedes encontrar las notas de otros creadores, tú igualmente eres capaz insertar el tuyo si te apetece.

---

---

Utiliza Nuestro Buscador