twitter-bootstrap – Bootstrap模式上的Jquery验证无法正常工作

发布时间：2020-12-17 21:24:24 所属栏目：安全来源：网络整理

导读：我想将url表单页面(远程)加载到模式中,它运行良好.但是对表单加载的 jquery验证只运行一次.当我再次加载表单时,除了刷新页面外,没有执行jquery验证.为什么这样.我的代码有什么问题. script type="text/javascript"$(document).ready(function(){ $('[data-to

我想将url表单页面(远程)加载到模式中,它运行良好.但是对表单加载的 jquery验证只运行一次.当我再次加载表单时,除了刷新页面外,没有执行jquery验证.为什么这样.我的代码有什么问题.

<script type="text/javascript">
$(document).ready(function(){
     $('[data-toggle="modal"]').click(function() {
        var url = $(this).attr('href').replace(/s/g,"+");
        if (url.indexOf('#') == 0) {
            $(url).modal('open');
        }else {
            $.get(url,function(data) {
                $(data).modal();
            }).success(function() {
                $('input:text:visible:first').focus();
                $("#frmAddMcb").validate({
                    submitHandler: function(form){
                        $('#modalAddMcb').modal('hide');
                        return postForm(form,"savemcb","Body","listmcb",false,false);
                    }
                });
            });
        }
    });
});
</script>
<div class="row-fluid">
<a href="addmcb" data-toggle="modal" class="btn btn-warning btn-xs link_href" title="Add MCB">Add MCB</a>

addmcb返回此表单

<div id="modalAddMcb" class="modal">
<div class="modal-dialogg">
    <div class="modal-content">
        <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">Add MCB</h4>
        </div>
        <div class="modal-body">
            <form id="frmAddMcb" enctype="multipart/form-data" class="form-horizontal" novalidate>
                <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">Name *</label>
                    <div class="col-md-9">
                        <input type="text" name="mcb.name" class="form-control" value='<s:property value="%{mcb.name}"/>' required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">Image *</label>
                    <div class="col-md-9">
                        <input type="file" name="fileUploaded" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button data-dismiss="modal" class="btn btn-default" type="button">Cancel</button>
                    <button class="btn btn-primary" id="submit" type="submit"> Save</button>
                </div>
            </form>
        </div>
    </div>
</div>

解决方法

再次加载模式时,jquery验证不起作用,因为document.ready()事件中的验证代码$(“#frmAddMcb”).validate({..})不再运行(因为页面已经加载)你需要这个来验证你的表格.

要解决此问题,您可以将验证代码添加到模态的load事件中,以确保每次加载模态时它都会运行：

$('.modal').on('loaded.bs.modal',function (e) {
  // your validation code
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!