1

Tengo el siguiente problema, tengo un formulario y estoy incluyendo cada parte con php y validando el formulario con una libreria de jquery este es el link Jquery validation, valido el formulario y muestro el siguiente pero en el siguiente formulario despues de validar no puedo mostrar la siguiente parte aqui les dejo el codigo:

<form id="publica-form">
    <div id="contenido1">
        <?php include_once 'views/modules/publicacion/info-general.php'; ?>
    </div>
    <div id="contenido2" style="display: none;">
        <?php include_once "views/modules/publicacion/info-establecimiento.php"; ?>
    </div>
    <div id="contenido3" style="display: none;">
        <?php include_once "views/modules/publicacion/info-distprecio.php"; ?>
    </div>
    <div id="contenido4" style="display: none;">
        <?php include_once 'views/modules/publicacion/info-servicios.php'; ?>
    </div>
    <div id="contenido5" style="display: none;">
        <?php include_once 'views/modules/publicacion/info-fotos.php'; ?>
    </div>
    <div id="contenido6" style="display: none;">
        <?php include_once 'views/modules/publicacion/info-condiciones.php'; ?>
    </div>
</form>

La idea seria que se muestre el siguiente contenido cada vez que se valida. este seria el codigo de jquery

$(document).ready(function($) {
$("#next1").click(function(event) {

$("#publica-form").validate({
	  rules: {
		nombre_alojamiento: "required",
	    tipo_alojamiento: "required",
	    numero_hab: {
	    	required: true,
	    	min: 1,
	    	number: true
	    },
	    nombre_contacto: "required",
	    numero_principal: "required",
	    direccion_1: "required",
	    direccion_2: "required",
	    pais_region: "required",
	    ciudad: "required",
	    codigo_postal: "required"
	  },
	  messages: {
	    nombre_alojamiento: "Ingresa el nombre de tu alojamiento",
	    tipo_alojamiento: "Selecciona unas de las opciones",
	    numero_hab: {
	    	required: "Ingresa el número de habitaciones",
	    	min: jQuery.validator.format("Ingresa un número mayor o igual a {0}"),
	    	number: "Solamente números admitidos"
	    },
	    nombre_contacto: "Ingrese un nombre de contacto",
	    numero_principal: "Ingrese un número de contacto",
	    direccion_1: "Ingrese una dirección",
	    direccion_2: "Ingrese una Avenida, edificio, etc",
	    pais_region: "Por favor selecciona una opción",
	    ciudad: "Ingresa la ciudad del establecimiento",
	    codigo_postal: "Ingresa el codigo postal del establecimiento"
	},
	errorElement: "p",
	submitHandler: function(form) {	
  $("#contenido1").css("display", "none");
	   	$("#contenido2").css("display", "block");
  }
	});
  });
en el siguiente hago lo mismo el boton id="next2" pero no me muestra el #contenido3 ni me oculta el #contenido2 este seria el codigo:

$("#next2").click(function(event) {
	/* Act on the event */
	$("#publica-form").validate({
		rules: {
			entrada_desde: "required",
			entrada_hasta: "required",
			salida_desde: "required",
			salida_hasta: "required",
			internet: "required",
			aparcamiento: "required",
			desayuno: "required",
			ninos: "required",
			idioma: "required"
		},
		messages: {
			entrada_desde: "Por favor ingresa desde que hora es la entrada",
			entrada_hasta: "Por favor ingresa hasta que hora es la entrada",
			salida_desde: "Por favor ingresa desde que hora es la salida",
			salida_hasta: "Por favor ingresa hasta que hora es la salida",
			internet: "Por favor indicanos si hay conexion a internet",
			aparcamiento: "Por favor indicanos si hay disponibilidad de aparcamiento",
			desayuno: "Indica si hay desayuno disponible para los clientes",
			ninos: "Indicanos si se pueden alojar niños en el alojamiento",
			idioma: "Indicanos que idioma habla el personal"
		},
		errorElement: "p",
		submitHandler: function(form2) {

	   var button2 = $("button[id='next2']");
	   $.ajax({
	   	beforeSend: function(){
	   			$(button2).attr('disabled', 'disabled');
	            $(button2).text('Cargando').append(' <i class="fas fa-spinner fa-spin"></i>');
	   		},
	   })
	   .done(function() {
	   	$("#contenido2").css("display", "none");
	   	$("#contenido3").css("display", "block");
	 
	   	console.log("success");
	   })
	   .fail(function() {

	   	console.log("error");
	   })
	   .always(function() {
	   	 setTimeout(function() {
               $(button2).removeAttr('disabled', 'disabled').text('Continuar');
            }, 1500);
	   	console.log("complete");
	   });
    	}

	});	
});	

4
  • verificas que entra a la parte "done" del ajax de la segunda parte? donde tienes el console.log("success") el 27 mar. 2018 a las 17:40
  • si entra porque la consola me muestra el success, creo que el problema esta en el submitHandler, no pueden haber dos. pero no se como validar si es un solo formulario
    – Avancini1
    el 27 mar. 2018 a las 18:44
  • esto es practicamente lo que quiero hacer jqueryvalidation.org/files/demo/multipart
    – Avancini1
    el 27 mar. 2018 a las 18:46
  • Cambia $("#publica-form").validate; es decir que cada FORM tenga su ID, porque estas validando lo mismo del paso 1 en cada paso.
    – Raul
    el 27 mar. 2018 a las 20:36

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.