Validation de la boîte de dialogue jQuery UI sans utiliser <form> Mots clés

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ semble être le meilleur plugin jquery validation là-bas. Je n'arrive pas à le faire fonctionner dans le jQuery UI dialog bien.

Ce code fonctionne à l'extérieur de la boîte de dialogue DIV:

<script type="text/javascript">
$(document).ready(function() {
     $("form").validate();
     $("a").bind("click", function() { alert($("form").valid()); });
});
</script>

<form method="get" action="">
   <p>
     Name
     <input id="name" name="name" class="required" minlength="2" />
   </p>
   <p>
     E-Mail
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <a href="#" id="clickTest">Click</a>
</form>

Cela fonctionne très bien. Lorsque je déplace le formulaire dans mon dialogue div, ouvrir la boîte de dialogue et cliquez sur le lien, il renvoie la valeur true, pas de bueno.

Est-il possible d'utiliser ce tueur de jquery validation plugin sans avoir à utiliser l' <form> balise? Ou est-il une meilleure façon de le faire avec succès?

Answer 1

Si quelqu'un d'autre rencontre cela, la boîte de dialogue jQuery-UI ne sera pas ajoutée au formulaire, mais juste avant </body> , les éléments à valider se trouvent en dehors de la section <form></form> :

Pour résoudre ce problème, indiquez simplement au dialogue de se déplacer à l'intérieur du formulaire lorsque vous le créez, comme suit:

 $("#mydiv").dialog("open").parent().appendTo(jQuery("form:first"));
 

Answer 2

Vous pouvez utiliser le plugin validy jquery

Le javascript

 function validateForm(){  
    $.validity.start();   
   // Required.  
    $("#recipientFirstName")
        .require();  
    var result = $.validity.end();  
    return result.valid;  
}


$(document).ready(function() {   
{  
  $('#dialog').dialog({
     autoOpen: false,   
     title: 'My title', 
     width: 600,  
     modal: true,  
     buttons: {  
          "Ok": function() {   
           if(validateForm())  
          {  
          saveOrder();
         $(this).dialog("close");  
       }  
      },   
      "Cancel": function()  
       {            
         $(this).dialog("close");       
        } 
     }
    });
})
 

Answer 3

Essayez de donner à votre formulaire un identifiant du type "myform".

Ensuite, essayez d’ajouter cet appel à l’événement onclick de votre ancre clicktest:

onclick = 'return ($ ("# mon formulaire"). validate (). form ());'

au lieu de faire la validation dans le document.ready.

Answer 4

Voir cette réponse . cela peut être utile.

Answer 5

Nick Craver solution a fonctionné pour moi, mais il ne fait pas de bien travailler pour IE7.

Il y a un bug dans IE7 où il ne respecte pas le z-index pour les éléments imbriqués; par conséquent, si vous déplacez la boîte de dialogue parent dans la forme, la superposition sera sur le dialogue, la prévention de l'interaction de l'utilisateur avec la boîte de dialogue. Un correctif pour IE7 est de définir la superposition de z-index de 1, puis de cloner l'élément de superposition et de l'ajouter à l'écran exactement comme vous l'avez fait pour la boîte de dialogue. Ensuite, dans le cas de la boîte de dialogue supprimer l'cloné de superposition. ie7 z-index problème

En fonction de présentation de votre site web, vous pourriez être en mesure de simplement déplacer la superposition et pas besoin de le cloner. J'ai eu pour le clone, comme mon site internet de mise en page marges gauche et droite, et j'avais besoin de la superposition de couvrir l'ensemble de la zone. Ci-dessous est un exemple de ce que j'ai fait:

var $dialog = $('#myDialog');
var $form = $dialog.parents('form:first');

$dialog.dialog({
    autoOpen: false,
    title: 'My Dialog',
    minWidth: 450,
    minHeight: 200,
    modal: true,
    position: ['center', 'center'],
    close: function () {
        // IE7 BUG: Needed to add an additional overload because of the z-index bug in IE7.
        $('.ui-widget-overlay-ie7fix:first').remove();
    },
    buttons: dialogButtons
});

$form.prepend($dialog.parent());
$dialog.dialog('open');

if ($.browser.msie && $.browser.version.slice(0, 1) == "7") {
    var $overlay = $('body .ui-widget-overlay:first');
    $form.prepend($overlay.clone().addClass('ui-widget-overlay-ie7fix'));
    $overlay.css('z-index', '-1');
}

Merci, Garry