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

Posted 2023-04-13

【中文标题】带有 JSON 的模式内的 Bootstrap 4 验证

【英文标题】：Bootstrap 4 validation inside modal with JSON

【发布时间】：2020-03-26 13:45:51

【问题描述】：

我需要在单击/提交表单之前验证 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 变得丑陋里面的数据。我该如何解决这个问题？

【参考方案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处理了

【讨论】：

不需要 ajax 处理是什么意思？我现在得到localhost/Controller/Action/11（来自当前的“控制器/动作/ID”，应该是localhost/otherController/otherAction（来自我设置的url：“/path”）

我对 ajax 的评论是指当响应进来时你正在做一个window.location.reload() 的事实，所以你可以做一个正常的页面发布并在服务器上处理它。虽然查看您评论中的网址，但您似乎正在编写一个单页应用程序。你是什​​么意思你得到 'localhost/controller/action/11' ？这是您的地址栏设置的吗？点击按钮前的页面url是什么？

哦，我现在看到它与

好的，所以你肯定会想用 ajax 的方式来做，然后停止该表单的发布:) 如果提交处理程序中有错误，表单将发布，刷新页面。您需要在开发人员工具中勾选“持久日志”框，并在控制台中检查错误消息。也许在函数中只使用event.preventDefault(); console.log('form submit handler'); 试试看，它首先停止了表单发布。

您需要将$("#SaveRecord").on('submit' 更改为$("#form").on('submit' <button> 发出“点击”事件，然后<form> 发出“提交”