jQuery驗證不引導模式遠程內容的工作

Question

jQuery驗證是不是在引導模式遠程內容的工作

有來自哪裏模式可以初始化加載內容

驗證工作都是好多個地方網頁，但它不工作時上遠程內容中的模態，其具有其上裝載

頁輸入

<a href="javascript:void(0);" class="btn btn-circle btn-icon-only btn-default" title="Edit" onclick="user_editer('<?php echo $user['user_code']; ?>')"> 
       <i class="icon-pencil"></i> 
       </a> 
<div class="modal fade" id="ajax" class="edit_user_modalss"role="basic"aria-hidden="true"> 
<div class="modal-dialog"> 
<div class="modal-content"> 
<div class="modal-body"> 
<img src="../../theme/assets/global/img/loading-spinner-grey.gif" alt=""  class="loading"> 
<span> 
&nbsp;&nbsp;Loading... </span> 
</div> 
</div> 
</div> 
</div> 

遠程模式的內容被加載模態上

<div class="modal-header"> 
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">  </button> 
<h4 class="modal-title">Edit User</h4> 
</div> 
<div class="modal-body"> 
<form id="edit_user_form" class="edit_user_form" action="index.php" method="post"> 
    <div class="row"> 
     <div class="col-md-12 col-sm-12 col-xs-12" style="background:;margin-top:0px"> 

      <div class="col-md-6 col-sm-12 col-xs-12" style="background:;margin-top:0px"> 

       <div class="form-group"> 
       <label for="phone">Name</label> 
       <input type="phone" name="user_name" class="form-control" id="user_name" placeholder="Enter Name" required maxlength="30" > 
       </div> 
        </div> 
      </div> 
      </div> 

<input type="submit" id="edit_user_submit"name="edit_user_submit" class="btn blue" value="Save changes"> 
      </form> 
    </div> 

驗證

  var form2 = $('#edit_user_form'); 
        var error2 = $('.alert-danger', form2); 
        var success2 = $('.alert-success', form2); 

        form2.validate({ 
         errorElement: 'span', //default input error message container 
         errorClass: 'help-block help-block-error', // default input error message class 
         focusInvalid: false, // do not focus the last invalid input 
         ignore: "", // validate all fields including form hidden input 
         rules: { 
          user_name: { 
           required: true, 
           minlength:2, 
           maxlength:30 
          } 
         }, 

         messages: { 
         user_name: { 
         required: 'Email address is required', 
         minlength: 'Please enter a valid email address', 
         maxlength: 'This email address has already been used' 
         }, 
         user_desig:"Select Authority", 
         }, 
         invalidHandler: function (event, validator) { //display error alert on form submit    
          success2.hide(); 
          error2.show(); 
          Metronic.scrollTo(error1, -200); 
         }, 

         highlight: function (element) { // hightlight error inputs 
          $(element) 
           .closest('.form-group').addClass('has-error'); // set error class to the control group 
         }, 

         unhighlight: function (element) { // revert the change done by hightlight 
          $(element) 
           .closest('.form-group').removeClass('has-error'); // set error class to the control group 
         }, 

         success: function (label) { 
          label 
           .closest('.form-group').removeClass('has-error'); // set success class to the control group 
         }, 


         submitHandler: function (form) { 
          success2.show(); 
          error2.hide(); 
          form.submit(); 
         } 
        }); 

模式初始化

function user_editer(user_code){ 
$('#ajax').modal({ 
    show: true, 
    remote: 'user_edit_modal.php?user_code='+user_code 
    });} 

Answer 1

您的驗證是不工作，因爲形式通過Ajax加載的，當你在那個時候初始化窗體上的validate（）的形式不存在於DOM中。

所以，你需要初始化的validate（）後您的形式完全加載。

要做到這一點，你可以使用loaded.bs.modal事件，將在ajax內容加載到模態後觸發。

嘗試像這樣：

$('#ajax').on('loaded.bs.modal', function (e) { 

    // initilize validate() here 
var form2 = $('#edit_user_form'); 
var error2 = $('.alert-danger', form2); 
var success2 = $('.alert-success', form2); 

form2.validate({ 
    errorElement: 'span', //default input error message container 
    errorClass: 'help-block help-block-error', // default input error message class 
    focusInvalid: false, // do not focus the last invalid input 
    ignore: "", // validate all fields including form hidden input 
    rules: { 
     user_name: { 
      required: true, 
      minlength: 2, 
      maxlength: 30 
     } 
    }, 
    messages: { 
     user_name: { 
      required: 'Email address is required', 
      minlength: 'Please enter a valid email address', 
      maxlength: 'This email address has already been used' 
     }, 
     user_desig: "Select Authority", 
    }, 
    invalidHandler: function (event, validator) { //display error alert on form submit    
     success2.hide(); 
     error2.show(); 
     Metronic.scrollTo(error1, -200); 
    }, 
    highlight: function (element) { // hightlight error inputs 
     $(element).closest('.form-group').addClass('has-error'); // set error class to the control group 
    }, 
    unhighlight: function (element) { // revert the change done by hightlight 
     $(element).closest('.form-group').removeClass('has-error'); // set error class to the control group 
    }, 
    success: function (label) { 
     label.closest('.form-group').removeClass('has-error'); // set success class to the control group 
    }, 
    submitHandler: function (form) { 
     success2.show(); 
     error2.hide(); 
     form.submit(); 
    } 
}); 
}); 

我希望這會幫助你。

Answer 2

我面臨同樣的問題，這工作完全正常的我。

試試這個：

$('body').on('click', '#test_id', function() { 

    alert(" hello"); 
}) 

更新您的jQuery這樣的代碼，它會工作： 我希望這將有助於在遠程模式<a id="test_id">test_jQuery</a>

使用下面的jQuery代碼放在一個錨標記的任何地方你（Y）