填写所有必填字段后使用 Bootstrap Modal

Posted

技术标签:

【中文标题】填写所有必填字段后使用 Bootstrap Modal【英文标题】:Use Bootstrap Modal after all the requiring field have been filled 【发布时间】:2020-04-26 04:50:03 【问题描述】:

编辑:我注意到当我点击模式内的按钮时,强制弹出窗口显示并且不允许继续。

我需要使用引导模式来添加有关某些授权的一些​​详细信息。所以,我有一个 cshtml 页面,其中包含一些必需的字段和一个打开模式的按钮。但是,当我单击按钮时,即使字段为空,模式也会显示。我该如何解决这个问题?

按钮代码:

<div class="col-sm-2"><input type="submit" value="@Risorse.Language.InserisciAutorizzazione" class="btnRegister btn btn-default" data-toggle="modal" data-target="#modalLoginForm" /></div>

模态(这不是我要使用的,我把它放在我的 cshtml 中仅用于测试):

<div class="modal fade" id="modalLoginForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header text-center">
                <h4 class="modal-title w-100 font-weight-bold">Sign in</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body mx-3">
                <div class="md-form mb-5">
                    <i class="fas fa-envelope prefix grey-text"></i>
                    <input type="email" id="defaultForm-email" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="defaultForm-email">Your email</label>
                </div>

                <div class="md-form mb-4">
                    <i class="fas fa-lock prefix grey-text"></i>
                    <input type="password" id="defaultForm-pass" class="form-control validate">
                    <label data-error="wrong" data-success="right" for="defaultForm-pass">Your password</label>
                </div>

            </div>
            <div class="modal-footer d-flex justify-content-center">
                <button class="btn btn-default">Login</button>
            </div>
        </div>
    </div>
</div>

这是图形结果:

如您所见,弹出该字段为必填字段的警报,但实际上它们也可能不输入。

我的想法是只有在填写了所有必填字段后才通过 JS 打开模式。但我想知道是否有更优雅的方式来做到这一点。

谢谢。

【问题讨论】:

【参考方案1】:

使用下面的代码在验证之前阻止模型,

HTML:

<input type="text" id="txt_name" /><button type="button" class="btn btn-primary btn-lg no-modal" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

Jquery:

$('#myModal').on('show.bs.modal', function (e) 
var button = e.relatedTarget;
if($("#txt_name").val().length==0) 
e.stopPropegation();
  
);

【讨论】:

您验证字段,然后继续。 对不起,我没明白你的意思。你能更好地解释一下垃圾吗?谢谢 其实,你可以使用上面的代码来阻止modal,并检查validation而不是检查hasClass 我的意思是你修改我的 jquery 来验证字段而不是检查 hasClass 如果你愿意,我会重写我的 Jquery 或者你可以做到吗?【参考方案2】:

我认为您的按钮代码中的 type 属性是问题的原因。 尝试将值“提交”更改为“按钮”。

【讨论】:

试过这个,但结果是模态出现了。我注意到,当我单击模式内的按钮时,会出现强制弹出窗口并且不允许继续。我更新了我的帖子。 可以看到modal里面的button里面没有type attr。尝试使用值“按钮”指定该属性并告诉我。 不工作,现在当我点击模态按钮时也不会出现强制弹出窗口 尝试通过数据属性禁用模态激活是什么情况?我将删除 data-toggle 和 data-target 并通过 javascript 打开模态,例如:$('#modal').modal('show'); 如果这不起作用,您能否提供屏幕上调用模态的代码?谢谢。

以上是关于填写所有必填字段后使用 Bootstrap Modal的主要内容,如果未能解决你的问题,请参考以下文章

提交后必填项

android中的必填字段[重复]

jquery允许取消提交后提交表单

如何提交表单并绕过 preventDefault

提交联系表 7 后如何防止在未输入必填字段的情况下重定向到某个 URL

如何使用预先填写的必填字段实例化 Django ModelForm?