Question

我有一个工作正常的表单。我希望在用户提交模式后向用户显示成功的消息。但我想检查输入是否为空用户不能提交表格，我的意思是我不希望模式在这种情况下打开，只是在提交按钮附近显示错误＆＃34;请填写表格，然后提交＆＃34;当用户填写表单并成功提交时，将打开模态页面以向用户显示表单已成功发布的消息。

这是我的表格：

        @using (Html.BeginForm("Create", "Contact_Us"))
        {
            @Html.AntiForgeryToken()

            <div class="form-horizontal">



                <div class="form-group">
                    @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group">
                    @Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12">
                        @Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group hidden">
                    @Html.LabelFor(model => model.Date, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-10">
                        @Html.EditorFor(model => model.Date, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Date, "", new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(model => model.Message, htmlAttributes: new { @class = "control-label col-md-2 txtformat" })
                    <div class="col-md-12 contactusmsg">
                        @Html.TextAreaFor(model => model.Message, new { htmlAttributes = new { @class = "form-control" } })
                        @Html.ValidationMessageFor(model => model.Message, "", new { @class = "text-danger" })
                    </div>
                </div>

                <div class="form-group contactuspostbtn">
                    <div class="col-md-12">
                        <input id="postcontactusmessage" type="submit" value="Send" class="btn btn-default" data-toggle="modal" data-target="#myModal" />
                    </div>

                </div>
            </div>
        }

这是我的模态：

 <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p>@ViewBag.ResultMessage</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

现在问题是当用户在输入为空时点击提交按钮时，显示模态页面。虽然我不想要它。

感谢任何帮助。

Answer 1

您可以在show modal（提交或点击事件）之前检查表单是否有效。我们假设你使用的是bootstrap模态，那么你可以使用类似的东西：

if ($('form').valid()) {
    $('modal').modal('show')
}

如何在打开提交按钮的模式之前验证输入

1 个答案: