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

Question

这是我目前的设计：

<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>

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

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

有关如何在显示模态之前先触发验证的任何建议吗？

Answer 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

Answer 2

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

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