包括来自另一个页面的Boostrap模态;t验证表单

Include a Boostrap modal from another Page Doesn't validate form

本文关键字：模态 验证 表单 Boostrap 另一个 包括      更新时间：2023-09-26

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

我的问题是，当我加载文件时，就像页面已经加载一样，验证表单没有任何效果。。。如果我使用php include或require_一旦它像一个魅力一样工作，问题是有很多页面是基于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'，它会起作用，我希望得到任何帮助，谢谢。

这个footer.html加载似乎封装在两个document.ready事件处理程序中。只要此代码在页面上比#footer_holderdiv运行得更远，那么两个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'
                    }
                }
            }
        }
    });
});
相关文章：