使用jquery在表单有效时触发模式 [英] Trigger modal if form valid using jquery

问题描述

我有一个问题，当提交表单时，它应该在有效时触发模式，如果无效，则应该触发验证脚本.我尝试在论坛中寻找答案，并遇到了一个

I have a problem wherein when a form is submitted, it should trigger a modal when it is valid and if it is not valid, it should trigger the validation script. I have tried looking for answers in the forum and came across one problem that resembles mine. But unfortunately, the modal still doesn't pop-up.

我想发生的是，当用户单击提交"按钮时，将运行验证，并且如果所有数据均有效，则将触发模式弹出，如果无效，则验证将与此处.

What I wanted to happen was when a user clicks the submit button, a validation will run and if all data is valid, it will trigger the modal to pop-up and if invalid, the validation will occur just like 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; }
}

CONTROLLER

    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');

但仍然没有运气.

谢谢.

推荐答案

更新

修改脚本后，发生的事情是无法单击表单.我认为模态正在触发，但没有模态显示.这是输出:

After modifying the script, what happens is that the form cannot be clicked. I think the modal is being triggered but no modal is showing. Here is the output:

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

直到我遇到此之前，我一直尝试在课堂上删除fade命令，现在，模态正在显示.我当前正在使用Bootstrap v3.0.0，并且fade命令在此处存在错误.感谢您的支持！

Until I came across this, I tried removing the fade command in class and now the modal is showing. I am currently using Bootstrap v3.0.0 and the fade command has a bug in here. Thanks for your support guys!

这篇关于使用jquery在表单有效时触发模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！