0

Desarrollando validaciones me tope con el problema que al momento de querer obtener el elemento i mediante querySelectAll me devuelve el nodelist vacío, pero solamente dentro de la función validarFormulario porque si saco el console.log(document.querySelectAll('#Grupo__Usuario i')); de la función si me arroja los elementos i

const formulario = document.getElementById('#Formulario');
const inputs = document.querySelectorAll("#Formulario input");

const expresiones = {
    usuario: /^[a-zA-Z0-9\_\-]{4,16}$/, // Letras, numeros, guion y guion_bajo
    nombre: /^[a-zA-ZÀ-ÿ\s]{1,40}$/, // Letras y espacios, pueden llevar acentos.
    password: /^.{4,12}$/, // 4 a 12 digitos.
    correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
    telefono: /^\d{7,14}$/ // 7 a 14 numeros.
}

const validarFormulario = (e) => {
    console.log(document.querySelectorAll('#Grupo__Usuario i'));
    switch (e.target.name) {
        case 'usuario':
            if (expresiones.usuario.test(e.target.value)) {
                document.getElementById('Grupo__Usuario').classList.add('formulario__grupo-correcto');
                document.getElementById('Grupo__Usuario').classList.remove('formulario__grupo-incorrecto');
                console.log(document.querySelectorAll('#Grupo__Usuario i'));

            } else {
                document.getElementById('Grupo__Usuario').classList.add('formulario__grupo-incorrecto');
            }
            break;

        case 'password':

            break;

        case 'password2':

            break;

        case 'correo':

            break;

        case 'telefono':

            break;
    }
}

inputs.forEach((input) => {
    input.addEventListener('keyup', validarFormulario);
    input.addEventListener('blur', validarFormulario);
});
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js" integrity="sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==" crossorigin="anonymous"></script>
<main>
<form id="Formulario" class="formulario">
    <!--Grupo Usuario-->
    <div id="Grupo__Usuario" class="formulario__grupo">
        <label for="usuario" class="formulario__label">Usuario</label>
        <div class="formulario__grupo-input">
            <input type="text" name="usuario" id="usuario" class="formulario__input" placeholder="Fernando123">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El usuario tiene que ser de 4 a 16 dígitos y solo puede contener numeros, letras y guion bajo</p>
    </div>

    <!--Grupo Nombre-->
    <div id="Grupo__Nombre" class="formulario__grupo">
        <label for="nombre" class="formulario__label">Nombre</label>
        <div class="formulario__grupo-input">
            <input type="text" name="nombre" id="nombre" class="formulario__input" placeholder="John Doe">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El nombre tiene que ser de 4 a 16 dígitos y solo puede contener numeros, letras y guion bajo</p>
    </div>

    <!--Grupo Contraseña-->
    <div id="Grupo__Password" class="formulario__grupo">
        <label for="password" class="formulario__label">Contraseña</label>
        <div class="formulario__grupo-input">
            <input type="password" name="password" id="password" class="formulario__input">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">La contraseña tiene que ser 4 a 12 digitos</p>
    </div>

    <!--Grupo Contraseña-->
    <div id="Grupo__Password2" class="formulario__grupo">
        <label for="password2" class="formulario__label">Repetir Contraseña</label>
        <div class="formulario__grupo-input">
            <input type="password" name="password2" id="password2" class="formulario__input">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">Ambas contraseñas tienen que ser iguales</p>
    </div>

    <!--Grupo Correo Electronico-->
    <div id="Grupo__Correo" class="formulario__grupo">
        <label for="correo" class="formulario__label">Correo Eléctronico</label>
        <div class="formulario__grupo-input">
            <input type="text" name="correo" id="correo" class="formulario__input" placeholder="[email protected]">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El correo solo puede contener letras,numeros, punto y guines</p>
    </div>

    <!--Grupo Telefono-->
    <div id="Grupo__Telefono" class="formulario__grupo">
        <label for="telefono" class="formulario__label">Telefono</label>
        <div class="formulario__grupo-input">
            <input type="text" name="telefono" id="telefono" class="formulario__input" placeholder="554589634">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El teléfono solo úede contener numeros y el máximo es de 14 dígitos
        </p>
    </div>

    <!--Grupo Terminos y Condiciones-->
    <div id="Grupo__Terminos" class="formulario__grupo">
        <label class="formulario__label">
            <input type="checkbox" name="terminos" id="terminos" class="formulario__checkbox">
            Acepto los Terminos y Condiciones
        </label>
    </div>

    <div class="formulario__mensaje" id="formulario__mensaje">
        <p>
            <i class="fas fa-exclamation-triangle"></i><b>Error:</b> Por favor rellena el formulario correctamente
        </p>
    </div>

    <div class="formulario__grupo formulario__grupo-btn-enviar">
        <button type="submit" class="formulario__btn">
            Enviar
        </button>
        <p class="formulario__mensaje-exito" id="formulario__mensaje-exito">
            Los datos se enviaron con éxito
        </p>
    </div>
</form>

1 respuesta 1

2

El "problema" es que fontawesome comenta el elemento <i> y agrega un <svg>. Puedes comprobarlo haciendo clic derecho en el icono y seleccionando "Inspeccionar elemento".

¿Por qué funciona console.log(document.querySelectAll('#Grupo__Usuario i')); fuera de validación? Porque aún no se han cargado los scripts que realizan el remplazo de la etiqueta; sin embargo, al ejecutar la validación ya todo está cargado y las etiquetas fueron remplazadas.

Para modificar, solo hay que acceder por clase, pero buscando el div padre desde el elemento que disparó el evento y solo con .querySelector(), porque se trata de un icono nada más, no es necesario .querySelectorAll().

const formulario = document.getElementById('#Formulario');
const inputs = document.querySelectorAll("#Formulario input");

const expresiones = {
    usuario: /^[a-zA-Z0-9\_\-]{4,16}$/, // Letras, numeros, guion y guion_bajo
    nombre: /^[a-zA-ZÀ-ÿ\s]{1,40}$/, // Letras y espacios, pueden llevar acentos.
    password: /^.{4,12}$/, // 4 a 12 digitos.
    correo: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
    telefono: /^\d{7,14}$/ // 7 a 14 numeros.
}
// fa-times-circle a fa-check-circle
const validarFormulario = (e) => {
    // Obtener div padre por clase
    let padre = e.target.closest('div.formulario__grupo');
    // Obtener icono desde contenedor
    let icon = e.target.closest('div').querySelector('.formulario__validacion-estado');
    let test = false;
    switch (e.target.name) {
        case 'usuario':
            test = expresiones.usuario.test(e.target.value);
            break;

        case 'password':
            // Validar juntos
        case 'password2':
            if(document.querySelector('#password').value != document.querySelector('#password2').value) {
                // Las contraseñas no son iguales
                test = false;
            } else {
                test = expresiones.password.test(e.target.value);
            }
            // Actualizar contraseña1
            let passId = (e.target.name == 'password') ? 'Password2' : 'Password';
            testClasses(
                document.querySelector(`#Grupo__${passId}`),
                document.querySelector(`#Grupo__${passId} .formulario__validacion-estado`),
                test
            );
            break;

        case 'correo':

            break;

        case 'telefono':

            break;
    }
    testClasses(padre, icon, test);
}

function testClasses(padre, icon, test) {
    // Eliminar clases de padre
    padre.className = 'formulario__grupo';
    if(test) {
        padre.classList.add('formulario__grupo-correcto');
        icon.classList.replace('fa-times-circle', 'fa-check-circle');
    } else {
        padre.classList.add('formulario__grupo-incorrecto');
        icon.classList.replace('fa-check-circle', 'fa-times-circle');
    }
}

inputs.forEach((input) => {
    input.addEventListener('keyup', validarFormulario);
    input.addEventListener('blur', validarFormulario);
});
.fa-check-circle {
    color:#0a0;
}
.formulario__grupo-correcto { background:#fff; }
.formulario__grupo-incorrecto { background:#fcc; }
<link rel="stylesheet" href="css/normalize.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/estilos.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js" integrity="sha512-YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg==" crossorigin="anonymous"></script>
<main>
<form id="Formulario" class="formulario">
    <!--Grupo Usuario-->
    <div id="Grupo__Usuario" class="formulario__grupo">
        <label for="usuario" class="formulario__label">Usuario</label>
        <div class="formulario__grupo-input">
            <input type="text" name="usuario" id="usuario" class="formulario__input" placeholder="Fernando123">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El usuario tiene que ser de 4 a 16 dígitos y solo puede contener numeros, letras y guion bajo</p>
    </div>

    <!--Grupo Nombre-->
    <div id="Grupo__Nombre" class="formulario__grupo">
        <label for="nombre" class="formulario__label">Nombre</label>
        <div class="formulario__grupo-input">
            <input type="text" name="nombre" id="nombre" class="formulario__input" placeholder="John Doe">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El nombre tiene que ser de 4 a 16 dígitos y solo puede contener numeros, letras y guion bajo</p>
    </div>

    <!--Grupo Contraseña-->
    <div id="Grupo__Password" class="formulario__grupo">
        <label for="password" class="formulario__label">Contraseña</label>
        <div class="formulario__grupo-input">
            <input type="password" name="password" id="password" class="formulario__input">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">La contraseña tiene que ser 4 a 12 digitos</p>
    </div>

    <!--Grupo Contraseña-->
    <div id="Grupo__Password2" class="formulario__grupo">
        <label for="password2" class="formulario__label">Repetir Contraseña</label>
        <div class="formulario__grupo-input">
            <input type="password" name="password2" id="password2" class="formulario__input">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">Ambas contraseñas tienen que ser iguales</p>
    </div>

    <!--Grupo Correo Electronico-->
    <div id="Grupo__Correo" class="formulario__grupo">
        <label for="correo" class="formulario__label">Correo Eléctronico</label>
        <div class="formulario__grupo-input">
            <input type="text" name="correo" id="correo" class="formulario__input" placeholder="[email protected]">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El correo solo puede contener letras,numeros, punto y guines</p>
    </div>

    <!--Grupo Telefono-->
    <div id="Grupo__Telefono" class="formulario__grupo">
        <label for="telefono" class="formulario__label">Telefono</label>
        <div class="formulario__grupo-input">
            <input type="text" name="telefono" id="telefono" class="formulario__input" placeholder="554589634">
            <i class="formulario__validacion-estado fas fa-times-circle"></i>
        </div>
        <p class="formulario__input-error">El teléfono solo úede contener numeros y el máximo es de 14 dígitos
        </p>
    </div>

    <!--Grupo Terminos y Condiciones-->
    <div id="Grupo__Terminos" class="formulario__grupo">
        <label class="formulario__label">
            <input type="checkbox" name="terminos" id="terminos" class="formulario__checkbox">
            Acepto los Terminos y Condiciones
        </label>
    </div>

    <div class="formulario__mensaje" id="formulario__mensaje">
        <p>
            <i class="fas fa-exclamation-triangle"></i><b>Error:</b> Por favor rellena el formulario correctamente
        </p>
    </div>

    <div class="formulario__grupo formulario__grupo-btn-enviar">
        <button type="submit" class="formulario__btn">
            Enviar
        </button>
        <p class="formulario__mensaje-exito" id="formulario__mensaje-exito">
            Los datos se enviaron con éxito
        </p>
    </div>
</form>

Nota: Hice algunas modificaciones para evitar repetir código en cada comprobación:

  • Crear variables para:
    • padre: Cambiar clase del contenedor
    • icon: Cambiar clase del icono
    • test: Verdadero o falso, de acuerdo a valor del campo
  • Validar password y password2 en el mismo bloque
  • Crear función para aplicar los cambios: Es necesaria solo porque al teclear contraseñas, probablemente convenga actualizar el estado de los dos campos
4
  • El objetivo es cambiar iconos pasar de fa-times-circle a fa-check-circle el 17 sep. 2020 a las 18:29
  • 1
    Listo, revisa la actualización.
    – Triby
    el 17 sep. 2020 a las 19:51
  • Lo más fácil seria trabajar con svg en lugar de i? el 19 sep. 2020 a las 1:17
  • @FernyCortez, técnicamente sí, pero se accede por medio de la clase porque el svg la mantiene.
    – Triby
    el 19 sep. 2020 a las 16:04

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.