Tengo un formulario en el cual necesito que funciones en multi steps utilizando jQuery. El problema que tengo es que el boton 'Prev' no funciona correctamente, cuando le doy click, redirecciona al campo anterior pero rapidamente recarga la pagina, o redirecciona a 'Pagina no encotrada' y no muestra lo que ya se llenó. Cada campo del formulario es un paso.
Este es el link de mi página (la subí a flywheel porque estoy utilizando wordpress, deben usar el usuario: flywheel y la contraseña: red-car cuando se muestre el prompt al ingresar al link) Multi-steps-form
Este es el html del formulario:
<form action="" class id="subscribe-form">
<fieldset id="user-email">
<div class="form-group">
<label for="email">Tu correo electrónico es:</label>
<input type="email" name="email" id="email">
</div>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-name">
<div class="form-group">
<label for="text">Y tu nombre es:</label>
<input type="text" name="name" id="text">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-tel">
<div class="form-group">
<label for="tel">Tienes un teléfono con número:</label>
<input type="tel" name="telephone" id="tel">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-country">
<div class="form-group">
<label for="country">Estás ubicado en el país:</label>
<input type="text" name="country" id="country">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-language">
<div class="form-group">
<label for="language">Y tu idioma es:</label>
<input type="text" name="language" id="language">
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<button class="btn-next"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-right" class="svg-inline--fa fa-arrow-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z"></path></svg></button>
</fieldset>
<fieldset id="user-terms-conditions">
<div class="form-group">
<input type="checkbox" name="terms-conditions" id="terms-conditions">
<label for="terms-conditions">Por favor acepta los terminos y condiciones</label>
</div>
<button class="btn-prev"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="arrow-left" class="svg-inline--fa fa-arrow-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z"></path></svg></button>
<input type="submit" value="ENVIAR">
</fieldset>
</form>
Estoy usando el plugin jquery para validar algunos campos y este es el codigo donde incluye el funcionamiento del botón 'NEXT' (que si funciona bien) y el del boton 'PREV' (el cual es que me da problema)
$(document).ready(function(){
// Custom method to validate username
$.validator.addMethod("usernameRegex", function(value, element) {
return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
}, "Username must contain only letters, numbers");
$(".btn-next").click(function(){
var form = $("#subscribe-form");
form.validate({
errorElement: 'span',
errorClass: 'help-block',
highlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').addClass("has-error");
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('.form-group').removeClass("has-error");
},
rules: {
email: {
required: true,
minlength: 3,
},
name: {
required: true,
usernameRegex: true,
minlength: 3,
},
telephone: {
required: true,
},
country: {
required: true,
},
language: {
required: true,
},
},
messages: {
name: {
required: "Tu nombre es necesario",
},
email: {
required: "Tu email es requerido",
},
telephone: {
required: "Es necesario llenar este campo",
},
country: {
required: "Por favor indica tu Pais",
},
language: {
required: "Llena el campo por favor",
},
}
});
if (form.valid() === true) {
if ($('#user-email').is(":visible")) {
current_fs = $('#user-email');
next_fs = $('#user-name');
} else if($('#user-name').is(":visible")) {
current_fs = $('#user-name');
next_fs = $('#user-tel');
} else if($('#user-tel').is(":visible")) {
current_fs = $('#user-tel');
next_fs = $('#user-country');
} else if($('#user-country').is(":visible")){
current_fs = $('#user-country');
next_fs = $('#user-language');
} else if($('#user-language').is(":visible")){
current_fs = $('#user-language');
next_fs = $('#user-terms-conditions');
} else if($('#user-terms-conditions').is(":visible")){
current_fs = $('#user-terms-conditions');
}
next_fs.show();
current_fs.hide();
}
});
//===============Esta es la parte del codigo para el boton 'PREV'====================
$('.btn-prev').click(function() {
if($('#user-email').is(":visible")) {
current_fs = $('#user-email');
} else if ($('#user-name').is(":visible")){
current_fs = $('#user-name');
next_fs = $('#user-email');
} else if ($('#user-tel').is(":visible")){
current_fs = $('#user-tel');
next_fs = $('#user-name');
} else if ($('#user-country').is(":visible")){
current_fs = $('#user-country');
next_fs = $('#user-tel');
} else if ($('#user-language').is(":visible")){
current_fs = $('#user-language');
next_fs = $('#user-country');
} else if ($('#user-terms-conditions').is(":visible")){
current_fs = $('#user-terms-conditions');
}
next_fs.show();
current_fs.hide();
});
});
Por favor ayudenme en esto