jQuery Validation funktioniert nicht in Bootstrap-modal Remote-Content

Question

jQuery Validierung nicht

in Bootstrap-modal Remote-Content arbeiten

gibt es mehrere Orte, von wo modal den Inhalt

Validierung funktioniert gut überall zu laden initialisiert werden auf der Seite, aber es ist nicht auf der Modal arbeiten, wenn das Remote-Gehalt in modalen geladen wird, das 1-Eingang

<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> 

Fern modales Gehalt hat, die

geladen wird

<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> 

Validation

  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(); 
         } 
        }); 

modal

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

Answer 1

Ihre Validierung arbeiten initialisieren nicht, weil Form durch Ajax geladen wird, wenn Sie validate() auf dem Formular ist die Form, zu diesem Zeitpunkt nicht initialisiert werden in DOM vorhanden.

So müssen Sie validate() nach Ihrem Formular vollständig geladen werden.

Um dies zu tun, können Sie loaded.bs.modal Ereignis verwenden, das Feuer wird, nachdem Ajax Inhalt auf Modal geladen wurde.

Versuchen wie folgt aus:

$('#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(); 
    } 
}); 
}); 

Ich hoffe, es wird Ihnen helfen.

Answer 2

Ich hatte das gleiche Problem und das funktioniert völlig in Ordnung für mich.

Try This: Setzen Sie einen Anker-Tag überall in Fernverkehr <a id="test_id">test_jQuery</a>

Verwenden Sie die folgenden jQuery-Code:

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

    alert(" hello"); 
}) 

Aktualisieren Sie Ihren jQuery-Code wie folgt und es wird funktionieren: Ich hoffe, es wird dazu beitragen, Sie (Y)