jQuery如何使用5步滑动窗体添加表单验证

Question

我是一个新手，发现很难阅读和理解来自其他作品的复杂javascript。

我想请一些帮助我使用简化的jquery，而不是使用我不太了解的复杂代码。

首先：这是一个包含性别，名字，dob，电子邮件和密码的5步表单。每个步骤都有验证。

请参阅复杂代码：

<script>
$(document).ready(function () {
    var Fist = {
    config: {
    stepsSelector: $(".steps"),
    nextSelector: $(".myButton"),
    errorSelector: $(".error"),
    indSelector: $(".steps-ind"),
    form: "",
    cur_step: 1,
    max_step: 1,
    offset: 278,
    errorString: "This field is required",
    clickEvent: "touchstart"
},

    run: function(e) {
        this.config.form = e;
        var t = this;
        var n = $(".regform").width();
        t.config.offset = n;
        if (typeof document.body.ontouchstart === "undefined") {
            t.config.clickEvent = "click"
        }
        t.config.indSelector.find(".step-ind" + t.config.cur_step).addClass("step-ind-active");
        t.config.nextSelector.on(t.config.clickEvent, function() {
            t.process()
        });
        t.config.form.find("input").on("keypress", function(e) {
            var n = e.keyCode ? e.keyCode : e.which;
            if (n === 13) {
                t.process()
            }
        });
        t.config.indSelector.find("div").on(t.config.clickEvent, function() {
            t.gotoStep($(this))
        })
    },

    indicateStep: function(e) {
        var t = this;
        t.config.indSelector.find("div").removeClass("step-ind-active");
        t.config.indSelector.find(".step-ind" + e).addClass("step-ind-active");
        setTimeout(function() { $('.step'+e+' input, .step'+e+' select').focus() }, 500);
    },

    animateStep: function(e) {
        var t = this;
        t.config.stepsSelector.css({
            transform: "translateX(-" + (e - 1) * t.config.offset + "px)"
        }, function() {
            t.config.form.find(".step" + e).find("input").focus()
        })
    },

    process: function() {
        var e = this;
        var t = e.config.form.find(".step" + e.config.cur_step).find("input,select");
        var n = false;
        t.each(function() {
            if (!e.validate($(this))) {
            n = true
            }
        });

        if (!n) {
            e.config.cur_step++;
            if (e.config.cur_step === 6) {
                e.config.form.submit()
            } else {
                e.config.max_step = e.config.cur_step;
                e.animateStep(e.config.cur_step);
                e.indicateStep(e.config.cur_step);
                if (e.config.cur_step === 5) {
                    e.config.nextSelector.val("Submit")
                }
            }
        }
    },

    gotoStep: function(e) {
        var t = e.text();
        var n = this;
        if (t < n.config.max_step) {
            n.animateStep(t);
            n.indicateStep(t);
            n.config.cur_step = t;
            if (t === 5) {
                n.config.nextSelector.val("Submit")
            } else {
                n.config.nextSelector.val("Next")
            }
        } else {
            n.process()
        }
    },

    validate: function(e) {
        var t = this;
        t.config.errorSelector.hide();
        e.removeClass("error-item");
        var n = false;
        if ($.trim(e.val()) === "") {
            n = true;
            t.config.errorString = "This field is required"
        }

        if (e.attr("name") === "email" && !t.validateEmail(e.val())) {
            n = true;
            t.config.errorString = "Invalid email address"
        }

        if (e.attr("name") === "firstname" && !t.validateName(e.val())) {
            n = true;
            t.config.errorString = "Invalid name"
        }

        if (n) {
            t.config.errorSelector.empty().append(t.config.errorString).fadeIn("fast");
            e.addClass("error-item");
            return false
        }
        return true
    },

    validateEmail: function(e) {
        var t = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return t.test(e)
    },

    validateInt: function(e) {
        var t = /^\d{1,}$/;
        return t.test(e)
    },

    validateName: function(e) {
        var t = /^\w+(\s)?\w+(\s)?(\w+)?$/;
        return t.test(e)
    }
}
Fist.run($("#regform"));
});

这是我的HTML：

<div class="regform">
<div class="form-wrapper">
    <form id="regform" method="post" action="http://www.test.com/signup">
        <div class="steps step1">
            <label>Your Gender?</label>
            <div name="gender">
                <div class="man-btn color" value="1">
                    <span>Man</span>
                    <div class="man" >
                        <i class="fa fa-male" aria-hidden="true"></i>
                    </div>
                </div>
                <div class="woman-btn" value="2">
                    <span>Woman</span>
                    <div class="woman">
                        <i class="fa fa-female" aria-hidden="true"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="steps step2">
            <label>First Name:</label>
            <input type="text" name="firstname">
        </div>
        <div class="steps step3">
            <label>What is Your Date of Birth?</label>
            <select name="dobday" id="dobday" class="required">
                <option value="">Day</option>
                <option value="1">01</option>
                <option value="2">02</option>
                <option value="3">03</option>
                <option value="4">04</option>
                <option value="5">05</option>
                <option value="6">06</option>
                <option value="7">07</option>
                <option value="8">08</option>
                <option value="9">09</option>
                <option value="10">10</option>
                <option value="11">11</option>
                <option value="12">12</option>
                <option value="13">13</option>
                <option value="14">14</option>
                <option value="15">15</option>
                <option value="16">16</option>
                <option value="17">17</option>
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="22">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option>
                <option value="26">26</option>
                <option value="27">27</option>
                <option value="28">28</option>
                <option value="29">29</option>
                <option value="30">30</option>
                <option value="31">31</option>
            </select>
            <select name="dobmonth" id="dobmonth" class="required">
                <option value="">Month</option>
                <option value="1">January</option>
                <option value="2">February</option>
                <option value="3">March</option>
                <option value="4">April</option>
                <option value="5">May</option>
                <option value="6">June</option>
                <option value="7">July</option>
                <option value="8">August</option>
                <option value="9">September</option>
                <option value="10">October</option>
                <option value="11">November</option>
                <option value="12">December</option>
            </select>
            <select name="dobyear" id="dobyear" class="required">
                <option value="">Year</option>
                <?php for($x=date("Y") - 18; $x >= 1918; $x--): ?>
                    <option value="<?php echo $x; ?>"><?php echo $x; ?></option>
                <?php endfor; ?>
            </select>
        </div>
        <div class="steps step4">
            <label>Email:</label>
            <input type="email" pattern="[^ @]*@[^ @]*" name="email">
        </div>
        <div class="steps step5">
            <label>Password:</label>
            <input type="password" name="password">
        </div>
        <div class="error">This field is required</div>
    </form>
</div>
<div class="submit">
    <input type="button" class="myButton" value="Next">
</div>
<div class="steps-ind">
    <div class="step-ind1">1</div>
    <div class="step-ind2">2</div>
    <div class="step-ind3">3</div>
    <div class="step-ind4">4</div>
    <div class="step-ind5">5</div>
</div>

请帮帮我。非常感谢你的帮助！

Answer 1

添加新按钮很简单！您可以将性别更改为选择下拉菜单，也可以添加新的div，如下所示：

            <div class="bro-btn" value="3">
                <span>Bro</span>
                <div class="bro">
                    <i class="fa fa-bro" aria-hidden="true"></i>
                </div>
            </div>

您需要注意的几件事情：fa fa-bro是对CSS中类的引用，该类添加了与所选性别相对应的图标。如果您要添加上述新按钮，则必须找到与Font Awesome匹配的图标。