表格在确认后未提交

form does not submit after validation

本文关键字:提交 确认 表格      更新时间:2023-09-26

当表单提交时,提示"万岁!"当验证为真时触发,但表单实际上不提交。如果我用@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>

您正在使用event.preventDefault,它阻止表单提交。您应该将这行移到else语句中,这样它只在验证失败时停止提交。

至于为什么使用BeginForm时验证没有触发,很可能是表单的ID不同或丢失,所以JavaScript没有绑定到表单。