Estoy usando el validador de Bootstrap 4, pero tengo varios campos ocultos en mi formulario, lo que quiero es que cuando los muestren, entonces sí sean necesarios completarlos, de lo contrario, no, ya que así no más me los valida y los pide obligatorios.
Acá dejo un trozo de mi codigo, pero mayormente, son varios de la misma forma, por ello es necesario que solo valide cuando el checkbox sea seleccionado.
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
// alerta cuando hay algun campo esta vacio
Swal.fire({
type: 'info',
title: 'Oops...',
text: 'Has dejado algún campo vacío, por favor verifica que todos los campos requeridos estén completos.'
})
// #alerta cuando hay algun campo esta vacio
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
$(function () {
$("#movimientoSismico").click(function () {
if ($(this).is(":checked")) {
$("#descripcion1").show();
} else {
$("#descripcion1").hide();
}
});
});
.visivilidad {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.all.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="needs-validation" autocomplete="off" novalidate>
<table class="table">
<tbody>
<tr>
<td>
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" value="Si" class="custom-control-input" id="movimientoSismico" name="terremoto">
<label class="custom-control-label" for="movimientoSismico"><b>Movimiento sísmico / terremoto</b><a href="https://srvags.sgc.gov.co/JSViewer/Amenaza_Sismica/" target="_blank"><img src="img/icono_terremoto.png" width="30px;" height="30px;"></img></a></label>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="col-md-12 visivilidad" id="descripcion1">
<div class="card">
<div class="card-body">
<textarea type="text" class="form-control " required rows="2" name="terremoto_observacion" placeholder="DESCRIPCIÓN / OBSERVACIÓN"></textarea>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
<label><h5><b>Calificación</b><a style="cursor: pointer;" onclick='alert("Se utiliza la información de eventos ocurridos en el pasado y se califica de forma cualitativa.")'><img title="Se utiliza la información de eventos ocurridos en el pasado y se califica de forma cualitativa." src="img/icono_help.png" width="15px;" height="15px;"></a></h5></label>
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_calificacion" id="amenaza-terremoto" onchange="colorChange(this); amenazaTerremoto(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="Posible">Posible</option>
<option value="Probable">Probable</option>
<option value="Inminente">Inminente</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<center><h5><b>Personas</b><a style="cursor: pointer;" onclick='alert("Son los trabajadores de la empresa. Para ellos se analiza su capacidad útil instalada.")'><img title="Son los trabajadores de la empresa. Para ellos se analiza su capacidad útil instalada." src="img/icono_help.png" width="15px;" height="15px;"></a></h5></center>
<div class="col">
<div class="card">
<h6 class="card-header"><center>Gestión Organizacional<a style="cursor: pointer;" onclick='alert("Si la empresa cuenta con una brigada de emergencias conformada, capacitada y entrenada; con una alarma de emergencias cuyos aspectos de mantenimiento y activación sean adecuados; existencia de un plan de emergencias escrito soportado por el SCI y con funciones asignadas; existencia de grupos externos de respuesta a emergencia.")'><img title="Si la empresa cuenta con una brigada de emergencias conformada, capacitada y entrenada; con una alarma de emergencias cuyos aspectos de mantenimiento y activación sean adecuados; existencia de un plan de emergencias escrito soportado por el SCI y con funciones asignadas; existencia de grupos externos de respuesta a emergencia." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_persona_gestion" id="valor_gestion_movimiento" onchange="colorChange1(this); valores_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Capacitación y Entrenamiento<a style="cursor: pointer;" onclick='alert("Divulgación del plan de emergencias, adiestramiento de las personas en el plan de evacuación, primeros auxilios, búsqueda y rescate, prevención y control de incendios, procedimientos operativos normalizados según los tipos de emergencias posibles y planes de atención médica.")'><img title="Divulgación del plan de emergencias, adiestramiento de las personas en el plan de evacuación, primeros auxilios, búsqueda y rescate, prevención y control de incendios, procedimientos operativos normalizados según los tipos de emergencias posibles y planes de atención médica." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_persona_capacitacion" id="valor_capacitacion_movimiento" onchange="colorChange1(this); valores_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Características de Seguridad<a style="cursor: pointer;" onclick='alert("Si la empresa cuenta con elementos de protección personal, implementos de primeros auxilios, de extinción de incendios (extintores, hidrantes, mangueras), elementos para rescate (linternas, cuerdas, etc.) e implementos de mantenimiento.")'><img title="Si la empresa cuenta con elementos de protección personal, implementos de primeros auxilios, de extinción de incendios (extintores, hidrantes, mangueras), elementos para rescate (linternas, cuerdas, etc.) e implementos de mantenimiento." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_persona_seguridad" id="valor_caracteristicas_movimiento" onchange="colorChange1(this); valores_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<center><h5><b>Recursos</b><a style="cursor: pointer;" onclick='alert("Analizan la respuesta en caso de desastre.")'><img title="Analizan la respuesta en caso de desastre." src="img/icono_help.png" width="15px;" height="15px;"></a></h5></center>
<div class="col">
<div class="card">
<h6 class="card-header"><center>Suministros<a style="cursor: pointer;" onclick='alert("La organización dispone de suministros para atender la emergencia.")'><img title="La organización dispone de suministros para atender la emergencia." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_recurso_suministro" id="valor_suministro_movimiento" onchange="colorChange1(this); recursos_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Edificaciones<a style="cursor: pointer;" onclick='alert("Si existen especificaciones de sismo resistencia, protección física, barreras, puertas y muros resistentes a fuego, estado de los medios y rutas de evacuación.")'><img title="Si existen especificaciones de sismo resistencia, protección física, barreras, puertas y muros resistentes a fuego, estado de los medios y rutas de evacuación." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_recurso_edificacion" id="valor_edificacion_movimiento" onchange="colorChange1(this); recursos_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Equipos<a style="cursor: pointer;" onclick='alert("Existencia de sistemas de alarma, detección y notificación de emergencias.")'><img title="Existencia de sistemas de alarma, detección y notificación de emergencias." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_recurso_equipo" id="valor_equipo_movimiento" onchange="colorChange1(this); recursos_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<center><h5><b>Sistemas y Procesos</b><a style="cursor: pointer;" onclick='alert("Conjunto de las actividades sociales y productivas de los elementos bajo riesgo involucrados al interior de la empresa.")'><img title="Conjunto de las actividades sociales y productivas de los elementos bajo riesgo involucrados al interior de la empresa." src="img/icono_help.png" width="15px;" height="15px;"></a></h5></center>
<div class="col">
<div class="card">
<h6 class="card-header"><center>Servicios Públicos<a style="cursor: pointer;" onclick='alert("Suministros adecuados y suficientes para el funcionamiento de la empresa y para la atención en caso de emergencia.")'><img title="Suministros adecuados y suficientes para el funcionamiento de la empresa y para la atención en caso de emergencia." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_sistema_servicio" id="valor_servicio_movimiento" onchange="colorChange1(this); sistemas_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Sistemas Alternos<a style="cursor: pointer;" onclick='alert("Suministro alterno a los servicios públicos de energía y agua. Existencia de sistemas de comunicación alterna.")'><img title="Suministro alterno a los servicios públicos de energía y agua. Existencia de sistemas de comunicación alterna." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_sistema_alterno" id="valor_sistemasA_movimiento" onchange="colorChange1(this); sistemas_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
<div class="card">
<h6 class="card-header"><center>Sistema de Recuperación<a style="cursor: pointer;" onclick='alert("Medios para restablecer operaciones normales de la empresa (seguros, pólizas.")'><img title="Medios para restablecer operaciones normales de la empresa (seguros, pólizas." src="img/icono_help.png" width="15px;" height="15px;"></a></center></h6>
<div class="card-body">
<div style="background-color:#3498DB; border-radius: 5px 5px 5px 5px;-moz-border-radius: 5px 5px 5px 5px;-webkit-border-radius: 5px 5px 5px 5px;">
<select name="terremoto_sistema_recuperacion" id="valor_sistemasR_movimiento" onchange="colorChange1(this); sistemas_movimiento(); interpretacion();" class="form-control" required>
<option value="" selected>Seleccione una opción</option>
<option value="0">0</option>
<option value="0.5">0.5</option>
<option value="1">1</option>
</select>
</div>
<div class="invalid-feedback">
Éste campo es obligatorio!
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12 col-sm-12 col-12" style="padding-top: 20px;">
<center>
<br>
<div style="padding-top:50px;" id="mostrar_recursos_movimiento"></div>
</center>
</div>
<div class="col-md-6 col-sm-6 col-6">
<div style="float:right; padding-right:20px;" id="mostrar_movimiento"></div>
</div>
<div class="col-md-6 col-sm-6 col-6" style="float:left;">
<div style="padding-left:20px;" id="mostrar_sistemas_movimiento"></div>
</div>
<div class="col-md-12 col-sm-12 col-12" style="padding-bottom:30px;">
<center>
<div id="rombo_terremoto"></div>
</center>
</div>
<br>
<!-- INTERPRETACIÓN DE LOS ROMBOS -->
<div class="col-md-12 col-sm-12 col-12" id="InterpretacionRombo">
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-success">Enviar</button>
</form>
Preferiblemente, evitar usar alguna otra librería externa para validar el formulario, aunque si no hay alguna otra manera de hacerlo, entoces podría cambiar de validador.
selected
le añades el atributorequired
, no necesitas ninguna librería, solo un poco de javascript o jqueryselect
ytextarea
, como podría añadirle required a cada uno de ellos?. Cabe decir, que quiero que se mantenga la valdación de bootstrap.$('#IdSelectoTextArea').attr('required');
Si te parece tedioso, puedes guardar todos los ids en una array y recorrerlos en un bucle, pero antes tienes que comprobar los checkbox que tienes seleccionados