Jquery Validation sur Bootstrap Modal ne fonctionne pas correctement

Question

Je veux charger la page de formulaire d'url (à distance) en modal, et cela fonctionne bien. Mais jquery validation sur le formulaire chargé fonctionne juste une fois. Lorsque j'ai rechargé le formulaire, la validation de jquery n'est pas exécutée sauf que j'actualise la page. Pourquoi être comme ça. Quel mal sur mon code.

<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 retourner ce formulaire

<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

La validation jquery ne fonctionne pas lorsque vous chargez le nouveau modal parce que votre code de validation $ ("# frmAddMcb"). Valident ({ ..}) dans l'événement document.ready() ne s'exécute pas à nouveau (car la page est déjà chargée) pendant que vous en avez besoin pour valider votre formulaire.

Pour résoudre ce problème, vous pouvez ajouter votre code de validation à l'événement de charge du modal pour vous assurer qu'il fonctionne chaque fois que vous chargez le modal:

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