包括来自另一个页面的引导模式不验证表单答案

【问题标题】：Include a Boostrap modal from another Page Doesn't validate form包括来自另一个页面的引导模式不验证表单
【发布时间】：2015-03-26 12:16:25
【问题描述】：

我知道这个问题已经回答过很多次了，jquery相当于PHP的include

我的问题是当我加载文件时就像页面已经加载并且验证表单没有任何效果......如果我使用 php include 或 require_once 它就像一个魅力，问题是那里有很多基于 Html 的页面，我不想把整个网站都变成 PHP。

基本：我有一个名为whatever.html的Html页面：

<html>
<head>
</head>
<body>
<div class="container" > 
content here...

<div id="footer_holder"></div>
</div>
<!-- /.container --> 

<!-- jQuery and all JS --> 
<script src="js/jquery.js"></script>... 

</body>
</html>

最后我包括一个包含 2 个模态的页脚：

<!-- Request Modal -->

<div class="modal fade" id="requestModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Solicita el Servicio</h4>
      </div>
      <div class="modal-body">
      <form role="form" id="requestModal" action="goto..." method="post">
        <div class="form-group">
          <label class="sr-only" for="exampleInputEmail1">Telefono</label>
          <input type="text" class="form-control" name="telefono" placeholder="telefono de Contacto" required>
        </div>
        <div class="form-group">
          <label for="textArea" class="sr-only">Textarea</label>
          <textarea class="form-control" rows="3" placeholder="Mensaje" name="mensaje" required></textarea>
        </div>
        <div class="form-group">
          <div id="form_request_result"></div>
        </div>
        </div>
        <div class="modal-footer">
        <button type="reset" class="btn btn-default"><i class="fa fa-eraser"></i>Borrar</button>
        <button type="submit" id="myRequestButton" class="btn btn-ghost"><i class="fa fa-send"></i>Enviar</button>
      </form>
    </div>
  </div>
</div>
</div>

<!-- Signin Modal Not rdy yet-->

<footer id="footer_design">
  <!-- Footer Content -->
</footer>

然后我得到了一个 custom.js 文件，其中所有代码都放在一个负载中

$(document).ready(function(){

jQuery(function(){
jQuery('#footer_holder').load('footer.html');
});

some other codes... Then validate form when user fire modal

$('#requestModal').formValidation({
        framework: 'bootstrap',
            err: {
            container: 'tooltip'
            },
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
            },
        locale: 'es_ES',
        fields: {
            telefono: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            mensaje: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });

所以，当我打开whatever.html 一切顺利时，页脚在页面内加载并且一切正常，但是，当用户调用Modal 并单击提交按钮时，它不会验证......我能想到的是页面已经加载，并且在触发验证时表单不存在，但我不知道如何在 java/jquery 上检查...就像我之前说的，如果我使用 require_once 'footer.html' 它可以工作，我很感激这方面的任何帮助，谢谢。

【问题讨论】：

尝试将负载放在document.ready 函数之前。这可能与此有关。
对不起，我没有在我的问题上提到，我也尝试过，但没有用... jQuery(function(){ jQuery('#foot.... 然后 document.ready ....
将验证代码放在 footer.html 中似乎可行，但加载速度有点慢而且很奇怪......我会继续寻找......

标签： javascript jquery html

【解决方案1】：

您似乎将这个footer.html 负载包装在两个 document.ready 事件处理程序中。只要此代码在页面上比#footer_holder div 运行得更远，那么两个document.ready 包装器都是不必要的。他们甚至可能会让你慢一点：http://encosia.com/dont-let-jquerys-document-ready-slow-you-down/

由于.load() 方法接受回调以在请求完成后运行，您最好立即加载内容，然后在加载footer.html 后使用该回调初始化您的验证。

jQuery('#footer_holder').load('footer.html', function() {
  $('#requestModal').formValidation({
        framework: 'bootstrap',
            err: {
            container: 'tooltip'
            },
        icon: {
            valid: 'fa fa-check',
            invalid: 'fa fa-times',
            validating: 'fa fa-refresh'
            },
        locale: 'es_ES',
        fields: {
            telefono: {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    }
                }
            },
            mensaje: {
                validators: {
                    notEmpty: {
                        message: 'The password is required'
                    }
                }
            }
        }
    });
});

【讨论】：

当我阅读您的博客时，我知道您已经找到了答案，非常感谢，我还在学习中，有时我会迷失在这么多代码中！