验证后无法提交（Bootstrap 4）

Question

我有一个简单的注册表，如下所示：

            <form id="regForm" name="regForm" method="post">
                <h3>Registration Form</h3>
                <div class="text-center">Registration only takes a brief moment, and it's <em><u>free</u></em>.</div>
                <hr />
                <div class="form-group">
                    <div class="form-wrapper">
                        <label for="">First Name</label>
                        <input type="text" class="form-control mx-auto" id="firstname" name="firstname" placeholder="First name" maxlength="32" />
                    </div>
                    <div class="form-wrapper">
                        <label for="">Last Name</label>
                        <input type="text" class="form-control mx-auto" id="lastname" name="lastname" placeholder="Last name" maxlength="32" />
                    </div>
                </div>
                <div class="form-wrapper">
                    <label for="">Email</label>
                    <input type="text" class="form-control mx-auto" id="email" name="email" placeholder="Email address" maxlength="80" />
                </div>
                <div class="form-wrapper">
                    <label for="">Password</label>
                    <input type="password" class="form-control mx-auto" id="pwd" name="pwd" placeholder="Password (6-character minimum)" maxlength="32" />
                </div>
                <div class="form-wrapper">
                    <label for="">Confirm Password</label>
                    <input type="password" class="form-control mx-auto" id="cpwd" name="cpwd" placeholder="Confirm your password" maxlength="32" />
                </div>
                <button id="join" type="submit">Register Now</button>
            </form>

验证它的 javascript 代码如下所示：

    <script>
        $.validator.setDefaults({
            submitHandler: function () {
                var data = $('form#regForm').serializeJSON();
                alert(data);
                data = JSON.stringify(data);
                $.post('procreg.ashx',
                    data,
                    function (data, status, xhr) { })
                    .done(function () { document.location.href = 'thankyou.aspx'; })
                    .fail(function (jqxhr, settings, ex) {
                        console.log(ex);
                        document.location.href = 'err.aspx';
                    });
                event.preventDefault();
            }
        });

        $(document).ready(function () {
            $("form#regForm").validate({
                rules: {
                    firstname: "required",
                    lastname: {
                        required: true,
                        minlength: 3
                    },
                    pwd: {
                        required: true,
                        minlength: 6
                    },
                    cpwd: {
                        required: true,
                        minlength: 6,
                        equalTo: "#pwd"
                    },
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    firstname: "Please enter your first name",
                    lastname: "Please enter your last name",
                    pwd: {
                        required: "Please provide a password (6-character minimum)",
                        minlength: "Your password must be at least 6 characters long"
                    },
                    cpwd: {
                        required: "Please provide a confirmation of your password",
                        minlength: "Your password must be at least 6 characters long",
                        equalTo: "Please enter the same password as above"
                    },
                    email: "Please enter a valid email address"
                },
                errorElement: "em",
                errorPlacement: function (error, element) {
                    // Add the `invalid-feedback` class to the error element
                    error.addClass("invalid-feedback");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.next("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function (element, errorClass, validClass) {
                    $(element).addClass("is-invalid").removeClass("is-valid");
                },
                unhighlight: function (element, errorClass, validClass) {
                    $(element).addClass("is-valid").removeClass("is-invalid");
                }
            });
        });
    </script>

验证按照宣传的方式进行，但没有进行表单发布。编译时没有编码错误。我在控制台中没有收到任何错误或消息，并且我在代码中输入的 alert() 没有触发。我做错了什么？

Answer 1

问题是“.serializeJSON()”函数静默失败。将其剥离后，我能够让剩余的代码正常工作，然后删除然后重新添加处理序列化的 jQuery javascript 库 (jquery.serializejson.js) 现在一切正常。