1

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>

1 respuesta 1

0

Necesitas inicializar la variable valid en true. Ademas te faltaba un signo = en la comparacion. Quedaria asi:

$(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 = true;
        
        ////////////////////////////////////  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>

1
  • 1
    Gracias @alanfcm, no me había fijado...
    – mau mca
    Commented el 2 abr. 2019 a las 21:51

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.