3

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;
    }
}
2
  • 1
    Hola bienvenida. Por favor muestra tus scripts. Por otra parte, a simple vista veo que tu código necesita depuración. Por que en tu <i> hay 2 clases?
    – Lilibeth
    Commented el 3 sept. 2021 a las 13:42
  • Y que contiene esta clase class="formulario__validacion-estado?
    – Lilibeth
    Commented el 3 sept. 2021 a las 13:45

2 respuestas 2

3

Veo que tienes muchas líneas de código innecesarias.

  1. No veo que estés importando la librería mediante CDN (a menos que lo tengas en tu local).

    Sería:

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
    
  2. La lógica que tienes en el Script es algo confusa para ti para para los demás es más tediosa entenderla, puedes hacer algo más sencillo, mira esto.

    Puedes usar onchange() en el elemento input nombre, si deseas validar solo ese campo.

    Sería algo como:

    <div class="form-group">
        <input type="text" name="nombre" id="nombre" placeholder="John Doe" onchange="validateName()">
        <i id="icon"></i>
    </div>   
    

    Y en tu script sería crear la función validateName(), que sería así:

    <script>
        function validateName(){
            let inputElement = document.getElementById('nombre');
            let iconToChange = document.getElementById('icon');
    
            if(inputElement.value.length < 1 || inputElement.value.length > 20){                    
                inputElement.style.borderColor = 'red';
                iconToChange.classList.add("fa", "fa-times");
                iconToChange.classList.remove("fa-check");
    
                //Demás lógica
            }else{
                inputElement.style.borderColor = 'green';
                iconToChange.classList.add("fa", "fa-check");
                iconToChange.classList.remove("fa-times");
            }
        }
    </script>
    

    Entonces cuando se interactué con el campo name, el script valida si la longitud del valor del campo es menor a 1 o mayor a 20, el campo lo pone de color rojo y agrega la clase al icono para mostrar la "x", y si no, muestra el campo de color verde y con el icono valido.

Espero haberte ayudado a solucionarlo!, saludos

0

Podiras ocultar y mostralo , mira este ejemplo:

function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

<button onclick="myFunction()">click</button>

<div id="myDIV" style="border:1px solid black;">
  Este elemento aparece y desaparece con el botón
</div>

Bueno esta echo sobre un click, para ocultar o desocultar, en tu caso seguramente tendrias que ocultar el icono de succes y poner el de error en cada caso..

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.