I have the following problem, I have a form and I am including each part with php and validating the form with a jquery library this is the link Jquery validation , validate the form and show the following but in the following form after validating I can not show the next part here I leave the code:
<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>
this would be the code of 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");
}
});
});
$("#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");
});
}
});
});