0

estoy teniendo un problema a la hora de validar los select, las validación que quiero hacer es que si se selecciona una opción del select que el borde de este se cambie de color ver, en caso de no seleccionar una opción se vuelva rojo

Les doy un ejemplo con un input:

input correcto

input incorrecto

A la hora de seleccionar un opcion del select, me tira este error de javascript

validacion.js:61 Uncaught TypeError: Cannot read properties of null (reading 'classList')
    at validarSexo (validacion.js:61:55)
    at HTMLSelectElement.onchange (nuevo.php:362:94)

Les paso el codigo HTML:

 <form method="POST" action="procesar_nuevo.php" class="formulario" id="formularioPaciente">

<!-- INPUT DEL EJEMPLO -->

            <div class="formulario__grupo" id="grupo__nombre">
                <label for="nombre" class="formulario__label">* Nombre:</label>
                <div class="formulario__grupo-input">
                    <input type="text" onkeyup = "validarNombre()" class="formulario__input" name="txtNombre" id="nombre" placeholder="Florencia">
                    <img src="../../imagenes/wrong.png" class="formulario__validacion-estado wrong" height="15px" width="15px">
                </div>
                <p class="formulario__input-error">El nombre solo debe de tener letras.</p>
            </div>

<!-- Select q no funciona -->

            <div class="formulario__grupo" id="grupo__Sexo">
                <label for="Sexo" class="formulario__label">* Sexo:</label>
                <div class="formulario__grupo-input">
                    <select onchange="validarSexo()" name ="cboSexo" id='cboSexo' class="formulario__input">

                        <option value = "0">Seleccionar</option>
                        <?php foreach ($listadoSexo as $sexo):  ?>
                            <option value="<?php echo $sexo->getIdSexo();?>">
                            <?php echo $sexo->getDescripcion(); ?>
                        <?php endforeach ?>
                    </select>

                    <img src="../../imagenes/wrong.png" class="formulario__validacion-estado" height="15px" width="15px">
                </div>
                    <p class="formulario__input-error">El sexo no puede estar vacio</p>
            </div>

            
            <div class="formulario__mensaje" id="formulario__mensaje">
                <p><b>Error:</b>Por favor rellene el formulario correctamente.</p>
            </div>
            <div class="formulario__grupo formulario__grupo-btn-enviar">
                <button type="submit" class="formulario__btn">Guardar</button>
                <p class="formulario__mensaje-exito" id="formulario__mensaje-exito">Formulario enviado exitosamente!</p>
            </div>

        </form>

CODIGO DEL JS:

    const campos ={
    nombre:false,
    sexo:false,
   
   


//PERSONA
    function validarNombre(){
        var nombre = document.getElementById('nombre')
            validarCampo(expresiones.nombre,nombre, 'nombre');
    }
  
    function validarSexo(){
        let sexo = document.getElementById("cboSexo").value;
        let campo = "sexo";
    
        if(sexo == 0 || sexo == ""){
            document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-incorrecto');
            document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-correcto');
            document.querySelector(`#grupo__${campo} .formulario__input-error`).classList.add('formulario__input-error-activo');
            campos[campo] = false;
        }else{
            document.getElementById(`grupo__${campo}`).classList.remove('formulario__grupo-incorrecto');
            document.getElementById(`grupo__${campo}`).classList.add('formulario__grupo-correcto');
            campos[campo] = true;
        }
    
    }
$(function(){
    $('#formularioPaciente').on('submit', function(event){
        

        if(campos.nombre==true && campos.sexo==true){
            document.getElementById("formulario__mensaje-exito").classList.add('formulario__mensaje-exito-activo');
        }else{
            event.preventDefault();
            document.getElementById("formulario__mensaje").classList.add('formulario__mensaje-activo');

        }
    })
})

Quiero saber como puedo hacer para que el border del select se cambie sin que me tire el error, y además de entender ese error, del porque pasa.. Muchas gracias

1 respuesta 1

0

Creo que tienes un error en el id del campo, estas usando mayúsculas id="grupo__Sexo" pero lo estas buscando con minúsculas let campo = "sexo";

2
  • Ay dios, si ese es el problema jajaja. Mil disculpas y muchas gracias!
    – Yiyi
    Commented el 6 mar. 2022 a las 16:06
  • No hay de que!!
    – yorch
    Commented el 6 mar. 2022 a las 16:08

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.