Javascript Jquery验证重置页面

我不熟悉使用javascript插件验证表单中的数据，因此遇到了一些问题。目前，第一次验证工作正常，并执行正确的jquery，但是表单第二部分的第二次验证会在输入有效数据时重置页面

下面是一个JSFIDLE来演示这个问题：

您还可以在以下位置查看css完全工作的版本：

http://178.62.85.190/index.html

Javascript:

<script type="text/javascript">
$(document).ready(function () {
    $("#buttonToSecondaryDetailsSection").click(function (e) {
        $('#primaryDetailsForm').validate({ // initialize the plugin
            rules: {
                forenameInput: {
                    required: true,
                    minlength: 2
                },
                surnameInput: {
                    required: true,
                    minlength: 2
                },
                emailInput: {
                    required: true,
                    email: true
                }
            }
        });
        var primaryValid = $('#primaryDetailsForm').valid();
        if (primaryValid) {
            e.preventDefault();
            $("#primaryDetailsForm").slideUp("slow");
            $("#secondaryDetailsForm").slideDown("slow");
        } else {

        }
    });

    $("#buttonToCommentsSection").click(function (f) {
        $('#secondaryDetailsForm').validate({ // initialize the plugin
            rules: {
                telephoneInput: {
                    required: true,
                    minlength: 11,
                    maxlength: 11
                },
                genderInput: {
                    required: true,
                },
                dobInput: {
                    required: true,
                    dateFormat: true
                }
            }
        });
        var secondaryValid = $('#secondaryDetailsForm').valid();
        if (secondaryValid) {
            f.preventDefault();
            $("#secondaryDetailsForm").slideUp("slow");
            $("#commentsDetailsForm").slideDown("slow");
        } else {

        }
    });
});

$（文档）.ready（函数（）{
$（“#按钮到第二个详细信息部分”）。单击（函数（e）{
$（'#primaryDetailsForm'）。验证（{//初始化插件
规则：{
名字输入：{
要求：正确，
最小长度：2
},
输入：{
要求：正确，
最小长度：2
},
电子邮件输入：{
要求：正确，
电子邮件：真的
}
}
});
var primaryValid=$（'#primaryDetailsForm'）.valid（）；
如果（主要有效）{
e、 预防默认值（）；
$（“#primarydailsform”）.slideUp（“slow”）；
$（“#Secondary Details Form”）。向下滑动（“慢速”）；
}否则{
}
});
$（“#按钮注释部分”）。单击（函数（f）{
$（'#secondaryDetailsForm'）。验证（{//初始化插件
规则：{
电话输入：{
要求：正确，
最小长度：11，
最大长度：11
},
性别说明：{
要求：正确，
},
输入：{
要求：正确，
日期格式：true
}
}
});
var secondaryValid=$（“#secondaryDetailsForm”）.valid（）；
如果（第二有效）{
f、 预防默认值（）；
$（#secondary detailsform”）.slideUp（“slow”）；
$（“#commentsDetailsForm”）。向下滑动（“慢速”）；
}否则{
}
});
});

表格：

<div id = "sections">
            <div id = "titlePanel">
                <p id = "sectionTitle">
                    Step 1: Your primary details
                </p>
            </div>              
            <form id = "primaryDetailsForm" method = "POST">
                <label for "forenameInput" id = "labels"> First Name </label>
                <br>
                <input id = "forenameInput" name = "forenameInput" type = "text" class = "input-block-level">
                <br>
                <label for "surnameInput" id = "label1"> Surname </label>
                <br>
                <input id = "surnameInput" name = "surnameInput" type = "text" class = "input-block-level">
                <br>
                <label for "emailInput" id = "label2"> Email Address:</label>
                <br>
                <input id = "emailInput" name = "emailInput" type = "email" class = "input-block-level">
                <br>
                <div id = "registrationButtonWrapper">
                    <button id = "buttonToSecondaryDetailsSection" class = "btn btn-default"> next > </button>
                </div>
            </form>
        </div>

        <div id = "Div1">
            <div id =  "Div2">
                <p id = "P1">
                    Step 2: Additional details
                </p>
            </div>
            <form id = "secondaryDetailsForm" method = "POST">
                <label for "telephoneInput" id = "label3"> Telephone Number </label>
                <br>
                <input id = "telephoneInput" name = "telephoneInput" type = "number" class = "input-block-level">
                <br>
                <label for "genderInput" id = "label4"> Gender </label>
                <br>
                <select id = "genderInput" name="genderInput">
                    <option value="male"> Male </option>
                    <option value="female"> Female </option>
                </select>
                <br>
                <label for "dateOfBirthInput" id = "label5"> Date Of Birth </label>
                <br>
                <input id = "dateOfBirthInput" name = "dobInput" type = "date" class = "input-block-level">
                <br>
                <div id = "Div3">
                    <button id = "buttonToCommentsSection" class = "btn btn-default" > next > </button>
                </div>
            </form>
        </div>

第一步：你的主要细节

名字




姓




电邮地址：




下一步>

步骤2：其他详细信息

电话号码




性别


男性
女性


出生日期




下一步>

首先，您要在每次单击时添加验证，您应该首先检查是否添加了验证。此外，日期验证看起来也失败了。

dateFormat

来自哪里？如果您使用

date

它将起作用。

我从一篇类似的帖子中获得了数据格式，该帖子询问如何在jquery验证中使用date。我通过删除按钮点击的验证来解决这个问题。以前，我假设验证必须在单击时完成，但我猜情况并非如此。谢谢您的帮助。@ChrisWaszczuk，完全正确，可以从按钮

单击
事件中将其删除。毕竟，无论你把代码复制到哪里，我自己的评论都会被附上<代码>//初始化插件
；这意味着你只能做一次。