0

Tengo que validar un formulario y cuando los campos que se rellenen sean erróneos cuando envíen el formulario tienen que ponerse los campos en rojo añadiendo una clase a mi js.

He puesto una alerta para comprobar que la validación es correcta pero no quiero que salte una alerta sino que el campo del formulario se llene en rojo con la clase .fondoRojo cuando el formulario sea erróneo.

¿Alguien me puede ayudar? ¿Cómo lo podría meter dentro de este código?

Estoy haciendo un curso y soy novata...

Mi codigo es el siguiente:

function validar() {
var nombre, partidas, expresion1;
nombre = document.getElementById("nombreJugador").value;
partidas = document.getElementById("numPartidas");
expresion1 = /[A-Za-z]{3,}/;

if (!expresion1.test(nombre)) {
alert("eeeeeeeeeeeeeeee");
return false;
}

if (partidas.value <= 0) {
alert("eeeeeeeeeehhheeee");
return false;
}
2
  • Hola! Bienvenidx a SOes. Ya tienes las clases CSS fondoRojo, puedes volver a seleccionar el elemento igual que como lo buscas inicialmente y cambiarle la clase para aplicarle esa
    – Alfabravo
    el 28 abr. 2022 a las 21:15
  • Para poner un fondo rojo, podrías cambiar el alert por nombre.style.backgroundColor = '#ffe6e6' o alternativa añadiendo una class CSS nombre.classList.add("fondoRojo")
    – D.Bulten
    el 28 abr. 2022 a las 21:36

1 respuesta 1

1

al momento de obtener el input puedes añadirle la clase con el metodo .classList.add

function validar() {
var nombre, partidas, expresion1;
nombre = document.getElementById("nombreJugador");
partidas = document.getElementById("numPartidas");
expresion1 = /[A-Za-z]{3,}/;

if (!expresion1.test(nombre.value)) {
nombre.classList.add("fondoRojo");
return false;
}

if (partidas.value <= 0) {
alert("eeeeeeeeeehhheeee");
return false;
}
2
  • Así me funciona pero una vez se me pone el campo en rojo cuando los datos son incorrectos, si relleno el formulario con los datos correctos y le doy al botón de enviar formulario el rojo no me desaparece, ¿qué debería hacer? el 29 abr. 2022 a las 19:15
  • 1
    @MiriamBeltra prueba añadirle a tu if un else { nombre.classList.remove("fondoRojo"); } así eliminas los estilos rojos.
    – D.Bulten
    el 30 abr. 2022 a las 22:07

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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