如果表单有效，则使用 jquery 触发模式答案

【问题标题】：Trigger modal if form valid using jquery如果表单有效，则使用 jquery 触发模式
【发布时间】：2023-03-25 00:40:02
【问题描述】：

我有一个问题，当提交表单时，它应该在它有效时触发一个模式，如果它无效，它应该触发验证脚本。我曾尝试在论坛中寻找答案，并遇到了一个类似于我的problem。但很遗憾，模态框仍然没有弹出。

我想要发生的是当用户单击提交按钮时，将运行验证，如果所有数据都有效，它将触发模式弹出，如果无效，验证将像 here 一样发生.

型号

public class Reg
{
    [Required(ErrorMessage = "Please enter first name")]
    public string Firstname { get; set; }

    [Required(ErrorMessage = "Please enter MiddleInitial")]
    public string MiddleInitial { get; set; }

    [Required(ErrorMessage = "Please enter Surname")]
    public string Surname { get; set; }
}

控制器

    public ActionResult Index()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Index(Reg reg)
    {
        return View();
    }

查看

@model WebApplication1.Models.Reg
<div class="col-lg-offset-4 col-lg-12">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()

        <div class="form-horizontal">

            <div class="form-group">
                @Html.LabelFor(model => model.Firstname, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.Firstname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Firstname) } })
                @Html.ValidationMessageFor(model => model.Firstname, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.MiddleInitial, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.MiddleInitial, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.MiddleInitial) } })
                @Html.ValidationMessageFor(model => model.MiddleInitial, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                @Html.LabelFor(model => model.Surname, htmlAttributes: new { @class = "control-label" })
                @Html.EditorFor(model => model.Surname, new { htmlAttributes = new { @class = "form-control", placeholder = @Html.DisplayNameFor(m => m.Surname) } })
                @Html.ValidationMessageFor(model => model.Surname, "", new { @class = "text-danger" })
            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </div>
    }
</div>

<div id="modals" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                Confirm Submit
                <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
            </div>

            <div class="modal-body">
                @Html.Partial("CedulaPartial")
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <input type="submit" value="Submit" class="btn btn-success" />
            </div>
        </div>
    </div>
</div>

JQUERY

<script type="text/javascript">
$('form').submit(function () {
    if ($(this).valid()) {
        $('#modals').modal('show');
    }
});

我也试过

$('#myModal').modal("show");
$('#myModal').dialog('open');
$('#myModal').modal();
$('#myModal').show();
$('#myModal').modal('toggle');

但还是没有运气。

提前致谢。

【问题讨论】：

你使用的是哪个模态库？
mvc的默认bootstrap，Bootstrap v3.0.0
form 有一个内置的验证方法reportValidity()，可能会有所帮助：developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/…
@leonsegal 1) OP 没有使用相关属性 2) 它在任何版本的 IE 中都不起作用
你没有取消默认的提交动作，所以你已经离开了页面（最好你可能会看到一个快速闪烁，因为模态在它离开之前显示。你需要在后面添加return false; $('#modals').modal('show');

标签： javascript jquery asp.net-mvc modal-dialog

【解决方案1】：

更新

修改脚本后，表单无法点击。我认为模态被触发但没有显示模态。这是输出：

https://media.giphy.com/media/61Z50T2JEpN1Zrk8hZ/giphy.gif

在遇到this 之前，我尝试在课堂上删除fade 命令，现在模式正在显示。我目前正在使用 Bootstrap v3.0.0 并且 fade 命令在这里有一个错误。感谢大家的支持！

【讨论】：