如果所有必填字段都已完成，则显示 Bootstrap 模式答案

【问题标题】：Display Bootstrap modal on if all required fields are completed如果所有必填字段都已完成，则显示 Bootstrap 模式
【发布时间】：2018-10-12 06:39:17
【问题描述】：

这是我目前的设计：

<div class="container">
    <div class="col-lg-6 well">
        <div class="form-group">
            <label>First Name</label>
            <input id="fn" class="form-control" required />
        </div>
        <div class="form-group">
            <label>Last Name</label>
            <input id="ln" class="form-control" required />
        </div>
        <div class="form-group">
            <button type="submit" class="btn btn-success" data-toggle="modal" 
                data-backdrop="static" data-keyboard="false" data-target="#signup">
                Submit
            </button>
        </div>
    </div>
</div>
<div id="signup" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>Signing up. Please wait...</p>
            </div>
        </div>
    </div>
</div>

该设计允许我在按下提交按钮后显示静态模式。这可以防止任何用户在注册过程中修改任何内容。

但是，模式会跳过必填字段的验证：

关于如何在显示模式之前先触发验证有什么建议吗？

【问题讨论】：

您是使用 jqvaldiation 插件还是自定义脚本来验证？
@kiranvj 我只使用 HTML 必需属性，但我愿意接受建议:)
使用required 属性的基于HTML 的验证不会阻止表单提交引起的JS 事件。您可能需要一个库来执行该验证，以便您可以在提交时确定表单是否有效，然后决定是否应显示模式。
你可以试试这个stackoverflow.com/questions/25311923/…

标签： jquery twitter-bootstrap twitter-bootstrap-3 bootstrap-modal

【解决方案1】：

首先您需要手动触发模态。从按钮中删除所有数据属性并将按钮类型更改为按钮

<button id="submit-button" type="button" class="btn btn-success">
                Submit
            </button>

接下来您需要处理按钮单击并检查输入字段。

$(function() {
   $("#submit-button").click(function() {
       if($("#fn").val() !="" && $("#ln").val() !="") {
         $('#signup').modal('show');
         $(this).closest("form").submit(); 
       }
   });
});

注意：可能有更好的方法

Related info

【讨论】：

【解决方案2】：

问题在于required 属性。检查其内容后启动模态，如果它为空（例如）关闭模态并显示错误：

$('#signup').modal('hide');

【讨论】：