Estoy agregando iconos a mi formulario, quiero que aparezca una cruz con error cuando el usuario completa datos erroneos y un okey en el caso contrario. Pero me aparece un cuadrado blanco en lugar del icono.
<form id="formularioCompra" class="formularioCompra">
<!--nombre !-->
<div class="formulario__grupo" id="grupo__nombre">
<label for="nombre" class="formulario__label">Nombre</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="nombre" id="nombre" placeholder="Ej:John Doe">
<i class="formulario__validacion-estado" class="fas fa fa-times-circle"></i>
</div>
<p class="formulario__input-error">El nombre no puede contener mas de 20 caracteres, ni simbolos de expresión.</p>
</div>
JavaScript:
const validarCampo = (expresion, input, campo) => {
if(expresion.test(input.value)){
document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-incorrecto');
document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-correcto');
document.querySelector(`#grupo__${campo} i`).classList.add('fa-check-circle');
document.querySelector(`#grupo__${campo} i`).classList.remove('fa-times-circle');
document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.remove('formulario__input-error-activo');
campos[campo] = true;
} else {
document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-incorrecto');
document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-correcto');
document.querySelector(`#grupo__${campo} i`).classList.add('fa-times-circle');
document.querySelector(`#grupo__${campo} i`).classList.remove('fa-check-circle');
document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.add('formulario__input-error-activo');
campos[campo] = false;
}
}