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:
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