He estado trabajando en un formulario con bootstrap. Lamentablemente tengo problemas con la validación en jquery. El formulario no se valida y no se comprime como debiera si los campos están llenos. Agregué console log para saber que estoy recibiendo pero la consola no indica nada. Gracias de antemano.
$(document).ready(function(){
$("#formFields").on("submit", function(e){
e.preventDefault();
var formVa = $("input[type=radio][name='FormED[]']:checked").length;
var formVb = $("input[type=radio][name='FormEH[]']:checked").length;
var formVc = $("input[type=radio][name='FormET[]']:checked").length;
var formVd = $("input[type=radio][name='FormED[]']:checked").length;
var FvNombre = $("input[type=text][name=FormN]").val();
var FvMail = $("input[type=email][name=FormM]").val();
valid = false;
//////////////////////////////////// LIMPIAR FORMULARIO... ////////////////////////////////////
$('#FP').removeClass("is-invalid");
$('#FN').removeClass("is-invalid");
$('#FM').removeClass("is-invalid");
///////////////////////////////// VALIDAR FORMULARIO... ///////////////////////////////
if (formVa === 0) {
$(".Fpreliminar").find(".invalid").eq(0).html("POR FAVOR CONTESTA LA PREGUNTA !<br/>");
$(".Fpreliminar").find(".invalid").eq(0).css({"padding-top" : "0.4rem" , "padding-bottom" : "1.8rem" , "color" : "#dc3545" , "font-size" : "12px"});
$(".Fpreliminar").find("p").eq(1).css("color", "#dc3545");
valid = false;
} else{
$(".Fpreliminar").find(".invalid").eq(0).html("");
$(".Fpreliminar").find(".invalid").eq(0).css("padding-top", "0rem");
$(".Fpreliminar").find("p").eq(1).css("color", "#555");
}
if (formVb === 0) {
$(".Fpreliminar").find(".invalid").eq(1).html("POR FAVOR CONTESTA LA PREGUNTA !<br/>");
$(".Fpreliminar").find(".invalid").eq(1).css({"padding-top" : "0.4rem" , "padding-bottom" : "0.8rem" , "color" : "#dc3545" , "font-size" : "12px"});
$(".Fpreliminar").find(".col-12").eq(5).removeClass("mt-3");
$(".Fpreliminar").find("p").eq(2).css("color", "#dc3545");
valid = false;
} else {
$(".Fpreliminar").find(".invalid").eq(1).html("");
$(".Fpreliminar").find(".invalid").eq(1).css("padding-top", "0rem");
$(".Fpreliminar").find(".col-12").eq(5).addClass("mt-3");
$(".Fpreliminar").find("p").eq(2).css("color", "#555");
}
if (formVc === 0) {
$(".Fsegundo").find(".invalid").eq(0).html("POR FAVOR CONTESTA LA PREGUNTA !<br/>");
$(".Fsegundo").find(".invalid").eq(0).css({"padding-top" : "1rem" , "color" : "#dc3545" , "font-size" : "12px"});
$(".Fsegundo").find("p").eq(1).css("color", "#dc3545");
valid = false;
} else{
$(".Fsegundo").find(".invalid").eq(0).html("");
$(".Fsegundo").find(".invalid").eq(0).css("padding-top", "0rem");
$(".Fsegundo").find("p").eq(1).css("color", "#555");
}
if (formVd === 0) {
$(".Ftercero").find(".invalid").eq(0).html("POR FAVOR CONTESTA LA PREGUNTA !<br/>");
$(".Ftercero").find(".invalid").eq(0).css({"padding-top" : "1rem" , "color" : "#dc3545" , "font-size" : "12px"});
$(".Ftercero").find("p").eq(1).css("color", "#dc3545");
valid = false;
} else{
$(".Ftercero").find(".invalid").eq(0).html("");
$(".Ftercero").find(".invalid").eq(0).css("padding-top", "0rem");
$(".Ftercero").find("p").eq(1).css("color", "#555");
}
if ((FvNombre).length < 2) {
$("#FN").addClass("is-invalid");
valid = false;
}
if (FvMail.indexOf('@', 0) == -1 || FvMail.indexOf('.', 0) == -1) {
$("#FM").addClass("is-invalid");
valid = false;
}
///////////////////////////////// SI SE ENVÍA CON ÉXITO...
if(valid){
$('#multiCollapseExample1 [data-toggle=collapse]').prop('disabled',false);
$("#formFields").trigger("reset");
$('#btn').trigger('click');
console.log("es válido");
}
///////////////////////////////// SI NO...
if (valid = false) {
$('#multiCollapseExample1').on('shown.bs.collapse', function () {
$('#multiCollapseExample1 [data-toggle=collapse]').prop('disabled',true);
});
console.log("no es válido");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="row justify-content-around mr-3 ml-3">
<div class="col-6">
<button class="btn principal btn-lg btn-secondary btn-block mt-2" type="button" data-toggle="collapse" data-target="#multiCollapseExample1" aria-expanded="false" aria-controls="multiCollapseExample1" id="btn">FORMULARIO</button>
<form name="form" id="formFields" method="" action="" enctype="">
<div class="form-group collapse px-3" id="multiCollapseExample1">
<div class="row Fpreliminar">
<div class="col-12 text-center mt-3">
<p class="h5"><strong> 1 SECCIÓN:</strong></p>
</div>
<div class="col-12 my-3">
<label>Pregunta formulario</label>
<input type="text" name="" id="" class="form-control form-control-sm" placeholder="">
</div>
<fieldset>
<div class="col-12">
<p class="h6"><em>Pregunta formulario</em></p>
</div>
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="FormED[]" id="" value="si">
<label>Sí</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="FormED[]" id="" value="no">
<label>No</label>
</div>
</div>
<div class="col-12">
<div class="invalid"></div>
</div>
</fieldset>
<fieldset>
<div class="col-12 mt-3">
<p class="h6"><em>Pregunta formulario</em></p>
</div>
<div class="col-12">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="FormEH[]" id="" value="si">
<label>Sí</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="FormEH[]" id="" value="no">
<label>No</label>
</div>
</div>
<div class="col-12">
<div class="invalid"></div>
</div>
</fieldset>
<div class="col-12 mt-3">
<p class="h6 pb-1"><em>Pregunta formulario</em></p>
<input type="text" name="FormEP" id="FP" class="form-control form-control-sm" placeholder="">
</div>
</div>
<div class="row">
<div class="col-12 my-3"></div>
</div>
<div class="row Fsegundo">
<div class="col-12">
<p class="h5 text-center"><strong> 2 SECCIÓN:</strong></p>
</div>
<fieldset>
<div class="col-12 mb-3">
<p class="h5 mt-2"><em>Elije una opción:</em></p>
</div>
<div class="col-12">
<div class="d-flex align-items-center">
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="FormET[]" id="" value="">
</div>
</div>
<div>
<p class="text-justify my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
</div>
</div>
</div>
<div class="col-12 mt-3">
<div class="d-flex align-items-center">
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="FormET[]" id="" value="">
</div>
</div>
<div>
<p class="text-justify my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
</div>
</div>
</div>
<div class="col-12">
<div class="invalid"></div>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-12 my-3"></div>
</div>
<div class="row Ftercero">
<div class="col-12">
<p class="h5 text-center"><strong> 3 SECCIÓN:</strong></p>
</div>
<fieldset>
<div class="col-12 mb-3">
<p class="h5 mt-2"><em>Elije una opción:</em></p>
</div>
<div class="col-12">
<div class="d-flex align-items-center">
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="FormED[]" id="" value="">
</div>
</div>
<div>
<p class="text-justify my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
</div>
</div>
</div>
<div class="col-12 mt-3">
<div class="d-flex align-items-center">
<div>
<div class="form-check">
<input class="form-check-input" type="radio" name="FormED[]" id="" value="">
</div>
</div>
<div>
<p class="text-justify my-auto">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididun</p>
</div>
</div>
</div>
<div class="col-12">
<div class="invalid"></div>
</div>
</fieldset>
</div>
<div class="row">
<div class="col-12 my-3"></div>
</div>
<div class="row Fdatos">
<div class="col-12">
<p class="h5 text-center"><strong> 4 SECCIÓN:</strong></p>
</div>
<div class="col-12 my-3">
<input type="text" name="FormN" id="FN" class="form-control form-control-sm" placeholder="Nombre">
<div class="invalid-feedback">POR FAVOR INGRESA TU NOMBRE !</div>
</div>
<div class="col-12">
<input type="email" name="FormM" id="FM" class="form-control form-control-sm" placeholder="Email">
<div class="invalid-feedback">POR FAVOR INGRESA UN CORREO !</div>
</div>
<div class="col-12 my-3">
<input type="tel" name="FormET" class="form-control form-control-sm" placeholder="Teléfono">
</div>
</div>
<div class="row">
<div class="col-12 my-3"></div>
</div>
<div class="row justify-content-center">
<div class="col-8">
<input type="submit" name="enviarForm" id="enviar" class="form-control btn btn-secondary my-1 mb-4" value="SUBMIT" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>