3

tengo múltiples campos de selección en el formulario, estos campos se agregan de forma dinámica, pueden haber desde 2 hasta 4, lo que busco es un método para validar todos los campos select por medio de jquery, por el momento tengo un código que si bien funciona al detectar los campos vacíos, el demás código me sigue ejecutando y lo que quiero es que el código pare hasta que todos campos estén validados. Muchas gracias por la ayuda.

$('.slt_d').change(function(e){

 $('.slt_d').find("option:selected").each(function(){

		if ($(this).val().trim() == '') {

			alert('falta un campo');
		
			    
		}


	})
  
  //debe ejecutarse el otro codigo si todos los campos estan completos;
  
 })

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="slt_d">

	<option value="">Seleccione un dato</option>	
	<option value="1">Dato 1</option>
  <option value="2">Dato 2</option>

</select>

<select class="slt_d">

	<option value="">Seleccione un dato</option>	
	<option value="a">Dato A</option>
  <option value="b">Dato B</option>

</select>

//demas select

1 respuesta 1

4

Podrías simplemente crear una variable para saber si existen campos sin completar, por ejemplo:

  1. Inicialmente la variable incompletos, esta en false
  2. Si detectamos un select sin completar, modificamos el valor de la variable incompletos a true.
  3. Luego para evitar que continue solo basta con comprobar el valor de incompletos y hacer un return;

Demo

$('.slt_d').change(function(e) {

  var incompletos = false; // AQUI inicializamos la variable
  $('.slt_d').find("option:selected").each(function() {
    if ($(this).val().trim() == '') {
      alert('falta un campo');
      incompletos = true; // AQUI modificamos la variable
    }
  });

  console.log('Hay incompletos: ', incompletos);
  if (incompletos) {// AQUI controlamos la variable
    return;
  }

  //debe ejecutarse el otro codigo si todos los campos estan completos;
  console.log('Éxito!');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="slt_d">
  <option value="">Seleccione un dato</option>	
  <option value="1">Dato 1</option>
  <option value="2">Dato 2</option>
</select>
<select class="slt_d">
  <option value="">Seleccione un dato</option>	
  <option value="a">Dato A</option>
  <option value="b">Dato B</option>
</select> //demas select

5
  • 3
    Yo añadiría también un return false; cuando encuentra el primer campo vacío para evitar que siga comprobando el resto de campos. Así se evita que muestre un mensaje por cada campo vacío. Commented el 12 dic. 2017 a las 20:34
  • 1
    Es una buena idea, siempre y cuando no se modifiquen estilos de los incompletos, o se quiera saber cuantos son los incompletos (o alguna otra cosa). Vale recordar que esto es un ejemplo y no un escenario real.
    – Marcos
    Commented el 12 dic. 2017 a las 20:36
  • Muchas gracias por la ayuda, me sirvió bastante.
    – Andrews
    Commented el 12 dic. 2017 a las 20:48
  • Hola estoy empleando el script pero no me válida el último select, como que no lo reconoce Commented el 25 ago. 2020 a las 3:40
  • @YtaloDueñas hola, podrías crear un ejemplo mínimo y verificable?
    – Marcos
    Commented el 25 ago. 2020 a las 12:45

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.