Question

我想将url表单页面（远程）加载到modal中，它运行良好。但是对表单加载的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>

Answer 1

再次加载模式时，jquery验证不起作用，因为document.ready中的验证码 $（＆＃34;＃frmAddMcb＆＃34;）。validate（{..}） （）事件不会再次运行（因为页面已经加载），而您需要这个来验证表单。

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

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

Bootstrap模式上的Jquery验证不能正常工作

1 个答案: