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.
"Uncaught TypeError: c_nombre.classList.toogle is not a function"
. Lo cual es esperable porque deberías llamar atoggle
y notoogle
toggle
y tampoco me lo está cogiendo :(</div>
encima delinput
submit, o despues, como prefieras!important
a esto:box-shadow: 0px 0px 30px red !important;
y diria que ya tendras lo que quieres