javascript - Jquery 验证重置页面

Question

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

这是一个演示该问题的jsfiddle:

http://jsfiddle.net/epn63vk3/2/

您还可以查看 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 {

        }
    });
});

表格:

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

Answer 1

首先，您要在每次点击时添加验证，您应该首先检查是否已添加。而且日期验证看起来也失败了。 dateFormat 来自哪里？如果您使用date，它就会起作用。