javascript - 表单验证后未提交

Question

提交表单后，会出现警报万岁!当验证为 true 时触发，但表单实际上并未提交。如果我用 @using (Html.BeginForm()) 替换表单，它可以，但剑道验证不起作用？

 <div class="form-horizontal">
    <h2 class="ra-well-title">Your Details</h2>


    <form id="ticketsForm">
        <div class="form-horizontal form-widgets col-sm-4">
            <div class="form-group">
                <label class="control-label col-sm-4" for="fname">First Name</label>
                <div class="col-sm-8 col-md-6">
                    @Html.TextBoxFor(m => m.firstName, new { @class = "input k-textbox", placeholder = "Enter Firstname", required = "required", validationmessage = "Required", id = "pFirstName", onchange = "OnChangeEventpFirstName()" })
                </div>


            </div>

            <div class="form-group">
                <label class="control-label col-sm-4" for="name">Last Name</label>
                <div class="col-sm-8 col-md-6">
                    @(Html.Kendo().TextBox()
                          .Name("surName")
                      .HtmlAttributes(new { placeholder = "Last Name", required = "required", validationmessage = "Enter Lastname", id = "pSurName", onchange = "OnChangeEventpSurName()" })
                    )
                </div>


            </div>


            <input type="submit" value="Send Booking" class="btn k-button" onclick="return confirm('Ready to send Booking?')" />
    </form>


    <script>
        $(function () {
            var validator = $("#ticketsForm").kendoValidator().data("kendoValidator");
            var status = $(".status");

            $("form").submit(function (event) {
                event.preventDefault();
                if (validator.validate()) {
                    alert("Hooray! Your tickets has been booked!")
                        .removeClass("invalid")
                        .addClass("valid");
                } else {
                    alert("Oops! There is invalid data in the form.")
                        .removeClass("valid")
                        .addClass("invalid");
                }
            });
        });

    </script>


</div>

Answer 1

您正在使用 event.preventDefault，这会阻止表单提交。您应该将该行移至 else 语句内，以便仅在验证失败时停止提交。

至于为什么当您使用 BeginForm 时验证不会触发，很可能是表单的 ID 不同或丢失，因此 JavaScript 未绑定(bind)到表单。