Javascript 引导模式表单在验证前关闭

我使用了下面的示例来构建我的表单：

我的javascript似乎没有被调用，因此只要我单击“保存更改”，表单就会关闭。如有任何想法，将不胜感激

这是我的代码

    <!-- Modal -->
    <div class="modal hide fade" id="mailerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h3_pink id="myModalLabel">Request a Mailer Bag</h3_pink>
        </div>
        <div class="modal-body">
            <h3_pink> </h3>
            <form method="post" id="FormMailer" action="soon2.php">
                <input type="hidden" name="FormMailer" value="1">
                <table>
                    <tbody>
                        <tr><td>First Name</td><td><input type="text" name="contact_fname" id="contact_fname" style="width:90%"><span class="hide help-inline">This is required</span></td>
                        <td>Last Name</td><td><input type="text" name="contact_lname" id="contact_lname" placeholder="Last Name" style="width:90%"><span class="hide help-inline">This is required</span></td></tr>
                        <tr><td>Email Address</td><td colspan="3"><input type="text" name="contact_email" id="contact_email" placeholder="Email Address" style="width:90%"><span class="hide help-inline">This is required</span></td></tr>
                        <tr><td>Street1</td><td colspan="3"><input type="text" id="contact_street1" name="contact_street1" placeholder="Street" style="width:90%"><span class="hide help-inline">This is required</span></td></tr>
                        <tr><td>Street2</td><td colspan="3"><input type="text" id="contact_street2" name="contact_street2" placeholder="Street" style="width:90%"></td></tr>
                        <tr><td>City</td><td colspan="3"><input type="text" id="contact_city" name="contact_city" placeholder="City" style="width:90%"><span class="hide help-inline">This is required</span></td></tr>
                        <tr><td>Zip</td><td colspan="3"><input type="text" name="zip" id="zip" style="width:90%"><span class="hide help-inline">This is required</span></td></tr>
                        <tr><td>Message</td><td colspan="3"><textarea id="contact_message" name="contact_message" style="width:90%"></textarea></td></tr>
                    </tbody>
                </table>
            </form>
        </div><!-- /.modal-body -->
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            <button class="btn btn-primary" data-dismiss="modal" id="FormMailerSubmit">Save changes</button>
        </div>
    </div><!-- /.modal -->
    <!-- Modal Ends -->

    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="/soon/js/bootstrap.js"></script>
    <link rel="stylesheet" href="soon/styles/bootstrap.min.css" media="screen"  />
    <link rel="stylesheet" href="soon/styles/bootstrap-responsive.min.css" media="screen"  />
    <link rel="stylesheet" href="soon/styles/style.css"/>
    <link rel="stylesheet" href="soon/styles/style_responsive.css"/>

    <script type='text/javascript'>
        $(document).ready(function() {
            $('#FormMailerSubmit').click(function(){
            if ($('#contact_fname').val()==="") {
                  // invalid
                  $('#contact_fname').next('.help-inline').show();
                  return false;
                }
                else {
                  // $('#FormMailer').submit();

                  return true;
                }
            });
        });           
    </script>

×
索取邮袋
名字这是必需的
姓氏这是必需的
电子邮件地址这是必需的
街道1这是必需的
街道2
这是必需的
ZipThis是必需的
消息
接近
保存更改
$（文档）.ready（函数（）{
$（'#FormMailerSubmit'）。单击（函数（）{
如果（$（'#联系_fname'）.val（）=“”）{
//无效的
$（'#contact_fname'）。下一步（'.help inline'）。显示（）；
返回false；
}
否则{
//$（'#FormMailer'）。提交（）；
返回true；
}
});
});           

由于按钮上的

data dismission=“modal”

属性，其关闭。把它拿走，它就关不上了。如果需要在JS中关闭它，可以使用

modal.modal（'hide'）
好的，首先要做的事


在所有按钮中指定类型-默认类型应为
submit
按钮，不是普通按钮

您可能希望在模式
hide
事件中执行验证。如果
数据无效，从事件处理程序返回
false
，并且
不会关门的。这只会给您留下识别的小问题
事件是来自关闭/取消按钮还是预期的
提交按钮

我上面链接的示例代码显示了SaveChanges按钮代码示例中的data dismise=“modal”。。。但为了安全起见，我删除了数据disclose=“modal”，它仍然关闭。我的js文件中可能有冲突，这导致我的嵌入式js没有一个在allI执行。事实上，我认为我以前在模式中有两个按钮时遇到过这个问题。不如试着为SaveChanges按钮添加一个锚定标记，看看这是否有帮助。