bootstrap modal ajax方式與jquery validate使用失效解決


解決方案:

使用modal show事件代替在ajax獲取頁面加入js的方式

下面是代碼

js方面

$('#contactAddModal').on('loaded.bs.modal', function () {
        $("#contactAddForm").validate({
         ignore: "",
          submitHandler: function(form){   
               $.ajax({  
               type: "POST",  
               url: "/contacts/save2.do?orgId="+id,  
               data: $("#contactAddForm").serializeArray(),  
               dataType: 'json',  
               success: function(result){  
                    if (result.status == 1) {
                        swal("提示", "新增成功", "success");
                        reflushPage();
                    } else {
                        if (result.info == "") {
                            toastr.success("數據異常!");
                        } else {
                            toastr.error(result.info);
                        }
                    }
               }  
            }); 
          }
        }); 
    });
    
    $('#contactAddModal').on('hidden.bs.modal', function () {
         $(this).removeData("bs.modal");
         $("#contactAddForm").empty();
         $("#contactAddForm").html("數據正在加載...");
    }); 

 

當前html頁面代碼

<#-- 新增聯系人-->
<div class="modal fade" id="contactAddModal"  role="dialog"  aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
    </div>
</div>
</div>

 

ajax頁面

<div class="modal-header">
<h4 class="modal-title">新增聯系人</h4>
</div>
<div class="modal-body">
<div class="row">
<form id="contactAddForm" class="form-horizontal ">
    <div class="form-group"><label class="col-sm-3 control-label" for="chineseFullName"><span class="required-star">*</span>客戶中文全稱</label>
        <div class="col-sm-7"><input name="chineseFullName" type="text" class="form-control required"></div>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-white" data-dismiss="modal">關閉</button>
        <button class="btn btn-primary" type="submit" >新增</button>
    </div>
</form>
</div>
</div>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM