1

Hola buenas estoy aprendiendo a validar formularios y tengo un problema con las clases, en caso de que el usuario no rellene un campo de tipo text, a ese campo le he querido cambiar la clase para que el sombreado que tiene cambie del suyo por defecto (morado) a una nueva clase que pone el sombreado en color rojo. El problema se soluciona si en el css en la nueva clase creada (.campoError), le añado !important pero tengo entendido que es una mala práctica y que a google no le gusta demasiado eso. Por otro lado también he probado con:
element.className="campoError" element.classList.toogle("campoError") Ninguno me soluciona nada, sigue manteniendo los valores por defecto y no consigo cambiar su clase. Empiezo a creer que es por algún conflicto con el css, pero no lo encuentro.

window.onload = function () {
    
    var boton_datos = document.getElementById('boton_datos');
    
    boton_datos.onclick=function (e) {
        e.preventDefault();
        validar();
    }
}
function validar() {
    var formu = document.forms[0];
    var c_nombre= formu.nombre;
    var c_email= formu.email;
    var c_asunto = formu.asunto;
    if (c_nombre.value == ""){
        alert("ei pon un nombre");
        c_nombre.focus();
        c_nombre.classList.toggle("campoError");
        return;
    }
    
}
.campo input{
    padding: 1rem;
    border: none;

    border-radius: 20px;
    width: 100%;
    background-color: transparent;
    box-shadow: 0px 0px 5px green;  
    outline: none;
    color: var(--parrafos);
}
.campoError{
    box-shadow: 0px 0px 30px red; 
}


.campo input:focus{
    box-shadow: 0px 0px 30px purple;
   
}
<form action="correo.php" method="post">
                    <div class="widget">
                        <h3>Contacta conmigo<i class="fas fa-envelope"></i></h3>
                        
                        
                        <div class="campo">
                            
                            <input type="text" id="nombre" placeholder="Nombre" name="nombre"autocomplete="off" >
                            
                        </div>
                        
                        </div>
                        
                        
                        <input type="submit" value="Enviar datos" class="boton" name="envio" id="boton_datos">
                    </div>
                    
                    
                </form>

La idea es que el usuario al no rellenar el campo, le salte un aviso y hacerle focus al campo sin rellenar con la nueva clase que te pone el input en rojo.

¿Se os ocurre algo? Un saludo.

9
  • El error es "Uncaught TypeError: c_nombre.classList.toogle is not a function". Lo cual es esperable porque deberías llamar a toggle y no toogle el 18 ene. 2022 a las 10:22
  • Es que toogle rima con google :-) (a mi me ha pasado varias veces y mira que lo se, pero sigo repitiendo ese error)
    – masterguru
    el 18 ene. 2022 a las 10:25
  • @PabloLozano ha sido un pequeño lapsus jaja, pero la verdad, lo he cambiado a lo que has dicho toggle y tampoco me lo está cogiendo :( el 18 ene. 2022 a las 10:47
  • Tambien te sobra un </div> encima del input submit, o despues, como prefieras
    – masterguru
    el 18 ene. 2022 a las 10:50
  • Ponle un !important a esto: box-shadow: 0px 0px 30px red !important; y diria que ya tendras lo que quieres
    – masterguru
    el 18 ene. 2022 a las 10:55

1 respuesta 1

2

Las reglas de CSS se aplican con una jerarquía dada por lo restrictiva que sean: una regla que sea etiqueta .clase es más restrictiva que una que sea .clase.

Por tanto, la regla

.campo input{
  ...
  box-shadow: 0px 0px 5px green;  
}

Es más restrictiva que

.campoError{
   box-shadow: 0px 0px 30px red; 
}

y por tanto la segunda no se aplica si entra en conflicto con la primera. Una solución sencilla es volver la regla que quieres aplicar más restrictiva:

window.onload = function () {
    
    var boton_datos = document.getElementById('boton_datos');
    
    boton_datos.onclick=function (e) {
        e.preventDefault();
        validar();
    }
}
function validar() {
    var formu = document.forms[0];
    var c_nombre= formu.nombre;
    var c_email= formu.email;
    var c_asunto = formu.asunto;
    if (c_nombre.value == ""){
        alert("ei pon un nombre");
        c_nombre.focus();
        c_nombre.classList.toggle("campoError");
        return;
    }
    
}
.campo input{
    padding: 1rem;
    border: none;

    border-radius: 20px;
    width: 100%;
    background-color: transparent;
    box-shadow: 0px 0px 5px green;  
    outline: none;
    color: var(--parrafos);
}
.campo input.campoError {
    box-shadow: 0px 0px 30px red; 
}


.campo input:focus{
    box-shadow: 0px 0px 30px purple;
   
}
<form action="correo.php" method="post">
                    <div class="widget">
                        <h3>Contacta conmigo<i class="fas fa-envelope"></i></h3>
                        
                        
                        <div class="campo">
                            
                            <input type="text" id="nombre" placeholder="Nombre" name="nombre"autocomplete="off" >
                            
                        </div>
                        
                        </div>
                        
                        
                        <input type="submit" value="Enviar datos" class="boton" name="envio" id="boton_datos">
                    </div>
                    
                    
                </form>

1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.