JavaScript - CAMBIAR ESTILO ERROR FORMULARIO JAVASCRIPT

Hola.

Tengo que validar un formulario y cuando los campos que se rellenen sean erróneos cuando envíe 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 rellene 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 código 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;
}

Prueba con:

document.getElementById('numPartidas').setAttribute('class', 'fondoRojo')

Espero que te sirva :)

Hola,

hay varios matices a tener en cuenta en tu problema.

1 - Dentro de la función de validación para cada campo del formulario debes obtener su objeto (getElementById), debes validar su valor (value) y debes asignarle un estilo css (style). Esto lo digo porque son propiedades distintas dentro de cada objeto que corresponde a un campo del formulario.

2 - Para que la validación sea correcta y visible debes controlar el envío del formulario: enviarlo si es correcto y NO enviarlo si hay errores. Esto lo digo porque un botón o un submit lo enviará por defecto, pase la validación o no la pase (utilizando este sistema) y no se verán los errores porque se cargará la página puesta en el (action) o se recargará la misma página por defecto.

Una forma de no enviar el form es utilizando los elementos HTML de validación de formularios (require, type="number, mail, etc") y el navegador no lo envía hasta que sean correctoss, pero como entiendo que necesitas hacer la validación en JavaScript pues aquí va.

La forma de conseguirlo es añadiendo un addEventListener('submit', funcion de validación) al final de la página. Dentro de la función de validación haces el envío si todo es correcto o no haces el envío y muestras los campos erroneos con CSS.

Te pongo un ejemplo basándome en tu código:


Como puedes ver al hacer la validación se marcan los campos en verde si son correctos y en rojo si no lo son. Puedes experimentar, hacer tus propias pruebas y mejorar la función, pero como ejemplo básico espero que te sirva para seguir aprendiendo ;)

PD: event.preventDefault(); evita el comportamiento por defecto de la acción submit

Un saludo!