Necesito habilitar el botón de registro cuando el formulario este completo. Tengo dos selectores de opciones los cuales deben ser seleccionados con la información que contienen. Cuando el formulario este completo necesito que se habilite el botón de registro. El código funciona y cumple lo que necesito quitando las funciones del select2 pero necesito utilizarlo. Me generan conflicto al utilizar la función de JavaScript select2 de Bootstrap. ¿Conocen alguna solución utilizando la función de habilitar el botón y también el select2? Estoy atento a sus comentarios!
<form action="formPrestamo" id="form" method="POST">
<select name="socio" class="form-select" id="socio" data-placeholder="Seleccione el Socio">
<option></option>
<option value="1">member one</option>
<option value="2">member two</option>
</select>
<br>
<select name="libro" class="form-select" id="libro" data-placeholder="Seleccione el Libro">
<option></option>
<option value="1">book one</option>
<option value="2">book two</option>
</select>
<button type="button" class="btn btn-primary" id="botonRegistrar" disabled>Registrar</button>
</form>
<script type="text/javascript">
$('#socio').select2({
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
"language": {
"noResults": function () {
return "<a href='#' class='btn btn-danger'>No hay resultados</a>";
}
},
escapeMarkup: function (markup) {
return markup;
}
});
$('#libro').select2({
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
"language": {
"noResults": function () {
return "<a href='#' class='btn btn-danger'>No hay resultados</a>";
}
},
escapeMarkup: function (markup) {
return markup;
}
});
let form = document.querySelector("#form");
let botonRegistrar = document.querySelector("#botonRegistrar");
function validar() {
let desabilitar = false;
if (form.socio.value == "") {
desabilitar = true;
}
if (form.libro.value == "") {
desabilitar = true;
}
if (desabilitar == true) {
botonRegistrar.disabled = true;
} else {
botonRegistrar.disabled = false;
}
}
document.getElementById("socio").addEventListener("change", validar);
document.getElementById("libro").addEventListener("change", validar);
form.addEventListener("keyup", validar)
</script>
document.getElementById("libro").change.select2(validar); // document.getElementById("libro").addEventListener("change.select2", validar);