'PREV' 按钮在多步骤表单中不起作用 - jQuery

Question

我有一个表格，需要您在其中分多步操作。我遇到的问题是 'Prev' 按钮无法正常工作，当我单击它时，它会重定向到上一个字段，但显然它会重新加载页面，或重定向到 'Page not found' 并且不显示内容已经满了。每个字段是一个步骤。
表单的另一个问题是，当它到达最后一个字段时，页面也会重新加载，并且不允许填写该字段（这是一个复选框），也不允许点击'SEND' ...

这是我页面的link（我上传到flywheel因为我用的是wordpress，他们必须使用用户名：flywheel和密码：red-car当输入link)

时出现提示

这是 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 plugin to validate 一些字段，这是包含 '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

因为按钮的默认类型是提交。当您单击上一个按钮时，将提交表单。我认为将 'type="button"' 添加到所有按钮将解决问题。

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

'PREV' 按钮在多步骤表单中不起作用 - jQuery

'PREV' button not working in multi step form - jQuery

html

forms

jquery

multi-step