Jquery 如果所有必填字段都已完成，则显示引导模式打开

以下是我目前的设计：

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

名字
姓
提交
报名。请稍候

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

但是，模式会跳过所需字段的验证：

---

关于如何在显示模式之前首先触发验证的任何建议？

问题在于

必需属性。检查其内容后启动模态，如果其为空（例如），则关闭模态并显示错误：

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

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

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

注：可能有更好的方法

您是否使用jqvaldiation插件或自定义脚本进行验证？@kiranvj我只使用HTML required属性，但我愿意接受建议：）使用
required
属性的基于HTML的验证不会阻止表单提交引起的JS事件。您可能需要一个库来执行该验证，以便在提交表单时确定表单是否有效，然后确定是否应显示模式。您可以尝试一下吗
$(function() {
   $("#submit-button").click(function() {
       if($("#fn").val() !="" && $("#ln").val() !="") {
         $('#signup').modal('show');
         $(this).closest("form").submit(); 
       }
   });
});