带有 JSON 的模式内的 Bootstrap 4 验证

Question

我需要在单击/提交表单之前验证 TextBoxFor，我尝试了多种方法，但仍然无法使其工作。

模态：

<div class="modal fade" id="MyModal_C">
            <div class="modal-dialog" style="max-width: 300px">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="ModalTitle"></h4>
                    </div>
                    <div class="modal-body">
                        <form id="form">
                            <fieldset id="SubmitForm">

                                <div class="form-group">
                                    @Html.LabelFor(x => x.Item2.Name, htmlAttributes: new { @class = "control-label" })
                                    @Html.TextBoxFor(x => x.Item2.Name, new { @id = "Name", @class = "form-control", @placeholder = "Name*", @required = "required" })
                                </div>

                                <div class="form-group">
                                    <a href="#nav-text" class="btn btn-block btn-danger" id="SaveRecord">SAVE</a>
                                </div>
                            </fieldset>
                        </form>
                    </div>
                </div>
            </div>
        </div>

JSON POST：

<script>
        $("#SaveRecord").on('click', (function () {
        var data = $("#SubmitForm").serialize();
        $.ajax({
            type: "POST",
            url: "/path",
            data: data,
            accept: 'application/json',
        }).done(function (data) {
            $("#MyModal_C").modal("hide");
            console.log("response: " + data);
            window.location.reload();
        }).fail(function (jqxhr, status, error) {
            console.log("error :" + error);
        }).always(function () {
            console.log("complete");
        });
    }));

        </script>

我看到如果我更改为 button type="submit" @required = "required" 可以工作，但我的 JSON POST 不能正常工作，它不会将数据发送到我的模型，并且 URL 变得丑陋里面的数据。我该如何解决这个问题？

Answer 1

为了让 HTML5 验证 (@required) 正常工作，需要提交表单，因此您需要 button type="submit" 元素

您应该监听表单的“提交”事件，而不是捕捉按钮的“点击”。

由于您不希望表单实际回发到服务器并进行页面刷新（这会弄乱您的 url），因此您需要阻止提交事件进行页面发布，因此您需要使用event.preventDefault()

所以你的事件处理看起来像

$("#form").on('submit', (function (event) {
    event.preventDefault();

    // Do your ajax stuff here

})

虽然你只是重新加载页面，如果你只是设置表单方法来发布数据，那么数据将作为表单数据而不是在 URL 中发送

<form method="POST">

那你就不需要ajax处理了