2

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.

8
  • 1
    puedes lograrlo con javascript, cuando el checkbox esté selected le añades el atributo required, no necesitas ninguna librería, solo un poco de javascript o jquery Commented el 14 may. 2019 a las 13:30
  • Tengo varios partes del formulario como esta, mas o menos unas 20, es decir, son muchos select y textarea, como podría añadirle required a cada uno de ellos?. Cabe decir, que quiero que se mantenga la valdación de bootstrap. Commented el 14 may. 2019 a las 13:34
  • JQuery: $('#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 Commented el 14 may. 2019 a las 13:38
  • Y que tal te parece si bloqueas el botón de enviar por defecto, y lo habilitas sólo cuando se haya seleccionado el checkbox. Commented el 14 may. 2019 a las 13:41
  • @NicolasOñate Vale, podríaa ser así, solo si el checkbox esta seleccionado entonces los campos son obligatorios, como lo harías?... Commented el 14 may. 2019 a las 14:12

2 respuestas 2

0

Podrías agregar una clase a los campos del formulario que quieres dejar obligatorios, es decir, como required, después de ello, con un .each() recorres todos los campor que tengan la clase que pusiste, en el caso del ejemplo sería .jsFieldValidation, y automáticamente el atributo required se agrega a esos campos que tienen la clase, convirtiéndolos en obligatorios.

$(".btnRecorrer").click(function() {
  $("body .jsFieldValidation").each(function() {
    $(this).attr('required', 'required').css('border-bottom', '5px solid red');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="jsFieldValidation">
  <option value="opcion1">Opcion 1</option>
  <option value="opcion1">Opcion 2</option>
</select>
<br>

<select>
  <option value="dato1">Dato 1</option>
  <option value="dato2">Dato 2</option>
</select>
<br>
<textarea class="jsFieldValidation"></textarea>
<br>
<input type="text" class="jsFieldValidation" />
<br>
<input type="text" />
<br>
<button class="btnRecorrer">Recorrer</button>

0

en ASP NET MVC uso jquery.form, jquery.validate, jquery.validate.unobtrusive

$(document).on("ready", function () {
   $.validator.unobtrusive.parse("frm-Servicio");
});

function enviarFormulario(){
   var frmValidation = $("#frm-Servicio").valid();

   if (frmValidation) {
      aqui envio mi formulario por ajax
   }
}

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.