Boîte de dialogue jQuery UI avec plugin de validation de formulaire

Question

J'utilise actuellement le bassistance validation plugin pour mes formulaires. Et j'utilise une boîte de dialogue modale pop-up pour héberger un formulaire qui doit être validé, mais pour une raison quelconque, il n'appelle pas mon formulaire ... tous mes ID et références fonctionnent et je n'en ai toujours pas Succès.

Peut-être que quelqu'un peut faire la lumière pour moi. Voici mon code Javascript.

$("#addEventDialog").dialog("open"); 

$("#addEventDialog").dialog({ 
    title: 'Add Event', 
    modal: true, 
    buttons: { 
     "Save": function() { 
      $("#interestForm").validate({ 
       submitHandler: function(form) { 
        $("#calendarWidget2").ajaxSubmit({ 
         target: "#calendarResponse", 
         dataType: 'json', 
         beforeSubmit: function() { 
          $('input[type=submit]').attr("disabled", true); 
          $("#calendarResponse").show('slow'); 
         }, 
         success: function(response, event) { 
          if(response.status == true) { 
           $('input[type=submit]').attr("disabled", false); 
           $("#calendarResponse").delay(5000).fadeOut('slow'); 

           //If the widget says it's okay to refresh, refresh otherwise, consider it done 
           if(response.refreshEvents == '1') { 
            $("#calendar").fullCalendar("refetchEvents"); 
           } 
           // Close the dialog box when it has saved successfully 
           $("#addEventDialog").dialog("destroy"); 
           // Update the page with the reponse from the server 
           $("#calendarResponse").append("Successfully Added: "+ response.title +"<br />"); 
          } else { 
           $("#calendarWidget2").validate(); 
           $("#calendarResponse").append("ERROR: "+ response.status +"<br />");  
          } 
         }, 
         error: function() { 
          alert("Oops... Looks like we're having some difficulties.");  
         } 
        }); 
       } 
      }); 
     }, 
     "Cancel": function() { 
      $(this).dialog("close"); 
     } 
    } 
}); 

Answer 1

Je résolu un problème similaire en 3 étapes:

1. Fixation du validateur à la forme:

   $('#your-form-id').validate(); 
   

2. Lorsque le bouton Enregistrer de votre formulaire modal est cliqué, soumettre le formulaire (le validateur sera déclenché):

   buttons: { 
       "Save": function() { 
       $('#your-form-id').submit(); 
       }, 
   

3. Déplacer la soumettre à la logique submitHandler validateur:

   $('#your-form-id').validate({ 
       submitHandler: function(form) { 
       // do stuff 
       } 
   }); 
   

Answer 2

La fonction validateurs validate définit tout simplement la validation, il ne déclenche pas. Le déclenchement se fait automatiquement lorsque le formulaire est soumis ou lorsqu'un champ s'écrit en Essayez d'ajouter votre code de validation à l'événement open.

$("#addEventDialog").dialog("open"); 
      $("#addEventDialog").dialog({ 
       open: function() { 
        $("#interestForm").validate({ 
         ... 
        }); 
       }, ... 

Answer 3

Essayez quelque chose comme ça. Mettez votre formulaire de valider des choses en dehors du script de dialogue ou je suppose que le rappel ouvert fonctionnerait aussi bien.

buttons : { 
     "Cancel" : function() { 
      $(this).dialog('close'); 
     }, 
     "Submit" : function() { 
      var isValid = $("#yourForm").valid(); 
      if(isValid) { 
       var formData = $("#yourForm")serialize(); 
       // pass formData to an ajax call to submit form. 

      } 
      return false; 
     } 
}, 

Answer 4

Je sais que cette question est ancienne. Mais celui-ci est venu en premier quand je cherchais ce problème particulier. Donc, je pense que cela peut aider les autres. Enfin réussi à y parvenir.

s'il vous plaît voir http://jsfiddle.net/536fm/6/

Answer 5

J'ai eu le même problème en utilisant le plugin jQuery Dialog (http://jqueryui.com/dialog/) avec le plugin jQuery Validator (http://jqueryvalidation.org/). Le problème est que la boîte de dialogue jQuery-UI ne s'ajoute pas au formulaire, elle l'ajoute juste avant </body >, donc les éléments à valider sont en dehors de la section <formulaire> </forme >. Pour résoudre ce problème, j'ajoute l'attribut "open" dans l'initialisation Dialog. Dans cet attribut, j'ajoute une fonction qui enveloppe mon élément div Dialog dans un élément de formulaire, puis initialise le validateur.

De plus, j'ajoute l'attribut "close" dans l'initialisation Dialog. À l'intérieur de cet attribut, j'ajoute une fonction qui déballe le formulaire que j'ai enveloppé dans l'événement open et réinitialise le validateur.

Un exemple simple,

<script type="text/javascript"> 
var validator; 
$(document).ready(function() { 
    $("#dialog-id").dialog({ 
    autoOpen: false, 
    resizable: true, 
    width: 450, 
    modal: true, 
    // Open event => wraps the Dialog source and validate the form. 
    open: function (type, data) { 
     $(this).wrap("<form id=\"form-id\" action=\"./\"></form>"); 
     validator = $("#form-id").validate(); 
    }, 
    // Close event => unwraps the Dialog source and reset the form to be ready for the next open! 
    close: function (type, data) { 
     validator.resetForm(); 
     $(this).unwrap(); 
    }, 
    buttons: { 
     "Cancel": function() { 
      $(this).dialog("close"); 
     }, 
     "Create": function() { 
      validator.form(); 
     } 
    } 
}); 
</script> 

Certains html pour le javascript ci-dessus,

<div id="dialog-id" title="Thematic Section"> 
    <div class="form_description"> 
     Create a thematic section for a conference type. 
    </div> 
    <ul style="list-style-type:none;"> 
     <li> 
      <label class="description" for="conferencetype_id">Conference Type:</label> 
      <div> 
       <select id="conferencetype_id" name="conferencetype_id" style="width:150px;"> 
        <option value="1" selected="selected">Type-1</option> 
        <option value="2" selected="selected">Type-2</option> 
        </select> 
      </div> 
     </li> 
     <li> 
      <label class="description" for="title">Title:</label> 
      <div> 
       <input id="title" name="title" type="text" maxlength="100" value="" style="width:350px;" required/> 
      </div> 
     </li> 
    </ul> 
</div>