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

Question

我有一个工作正常的表单。我想在用户以模式提交表单后向他们显示成功消息。但我想检查输入是否为空用户无法提交他们的表单，我的意思是我不希望在这种情况下打开模式，就在提交按钮附近显示错误“请填写表单然后提交”以及用户填写时表单，并成功提交，然后打开模态页面以向用户显示您的表单已成功发布的消息。

这是我的表格：

        @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

您可以在显示模式之前检查表单是否有效（提交或点击事件）。假设您正在使用引导模式，那么您可以使用以下内容：

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