"上一页"按钮在多步骤形式中不起作用 - jQuery

Question

1. 我有一个表格，我需要你在多个步骤的功能。我的问题是，"前"按钮不正常工作，当我点击它，它重定向到前一个字段，但显然它重新加载页面，或重定向到"未找到的页面"，不显示什么是已经填充。每个字段是一个步骤。

2. 表单的另一个问题是，当它到达最后一个字段时，页面也被重新加载，它不允许填写字段(这是一个复选框)，也不点击'SEND'…

这是我的页面链接(我上传它到飞轮，因为我使用wordpress，他们必须使用用户名:飞轮密码:red-car当输入链接时出现提示)

Multi-steps-form

这是表单的html:

<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>

我使用jquery插件来验证一些字段，这是代码，包括'NEXT'按钮的操作(工作正常)和'PREV'按钮(这是给我一个问题)

$(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();
}
});
//===============This is the part of the code for the 'PREV' button====================
$('.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();
});
});

请帮我做这件事

Answer 1

因为默认的按钮类型是submit。当您单击prev按钮时，表单就提交了。我认为在所有的按钮上加上type="button"可以解决这个问题。

<button type="button" class="btn-prev">...</button>