Question

提交表单时，警报Hooray！验证为真时触发，但表单实际上没有提交。如果我用@using（Html.BeginForm（））替换表单，但是kendo验证不起作用吗？

 <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没有绑定到表单。

表格在验证后不提交

1 个答案: