web-dev-qa-db-fra.com

jQuery UI Dialog Validation sans utiliser les balises <form>

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ est vraisemblablement le meilleur plugin de validation jquery. Je n'arrive pas à le faire fonctionner dans la boîte de dialogue de l'interface utilisateur de jQuery.

Ce code fonctionne en dehors du 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 div de dialogue, ouvre un dialogue et clique sur le lien, il renvoie true, no bueno.

Est-il possible d'utiliser ce plugin de validation killer jquery sans avoir à utiliser la balise <form>? Ou y a-t-il un moyen encore meilleur de le faire avec succès?

jqueryvalidationjquery-uijquery-pluginsjquery-validate
32
Josh

Si quelqu'un d'autre rencontre cela, la boîte de dialogue jQuery-UI ne s'ajoute pas au formulaire, mais juste avant le </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"));
33
Nick Craver

Vous pouvez utiliser le plugin valitidy 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();
                    $(".validity-tooltip").css("display", "none"); 
                    $(this).dialog("close");  
                }
            },
            "Cancel": function() {
                // The following line was added to
                // hide the tool-tips programmatically:          
                $(".validity-tooltip").css("display", "none");
                $(this).dialog("close");       
            }
        }
   });
})
3
Allan Rwakatungu

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.

1
iZ.

La solution Nick Craver a fonctionné pour moi, mais cela ne fonctionne pas entièrement pour IE7.

Il y a un bogue dans IE7 où il ne respecte pas z-index pour les éléments imbriqués; par conséquent, si vous déplacez le parent de la boîte de dialogue dans le formulaire, la superposition recouvrira la boîte de dialogue, empêchant ainsi l'utilisateur d'interagir avec la boîte de dialogue. Un correctif pour IE7 consiste à définir l'index z de la superposition sur -1, puis à cloner l'élément de superposition et à l'ajouter à la fiche, comme vous l'avez fait pour la boîte de dialogue. Ensuite, dans l'événement de fermeture de la boîte de dialogue, supprimez la superposition clonée . Problèmes de superposition d'index Z de IE7

En fonction de la présentation de votre site Web, vous pourrez peut-être simplement déplacer la superposition sans avoir à la cloner. Je devais le cloner, car la mise en page de mon site Web comportait des marges gauche et droite et j'avais besoin de la superposition pour couvrir toute la zone. Voici 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

1
Garry English

Cela peut ou peut ne pas être pertinent, mais c’était mon problème et ma solution:

J'ai eu exactement le même problème, lorsque j'ai ouvert le dialogue, ma balise "form" a été remplacée par une balise "div".

C'est parce que j'ai placé le dialogue dans un élément de formulaire déjà ouvert (vous ne pouvez évidemment pas avoir de formulaire dans un formulaire).

Ne fais pas ce que j'ai fait :) 

<form>
    <form>

    </form>
</form>
1
pleshy

J'ai utilisé cela et cela fonctionne dans IE8, sur une application asp.net utilisant jQuery 1.11.2 et jQueryValidate 1.13.1:

$('#lnz_NuevoLink').click(function () {
        $("#lnz_AgregarDiv").dialog("open").parent().appendTo(jQuery("#aspnetForm"));   //Add the dialog to the form     
        $("#lnz_AgregarDiv").parent().attr('style', 'z-index: 101');                //To avoid the modal
        $("#lnz_AgregarDiv").dialog("option", "position", { my: "center", at: "center", of: window }); //To center the dialog
    })
0
Diana Eneida

Avez-vous essayé d’enrouler le formulaire autour de votre div à la place (selon la spécification W3C, les balises de formulaire ne sont pas autorisées dans les div.)

Sans ré-écrire le plugin, je ne vois pas pourquoi facile de le faire sans un élément de formulaire.

0
Jared

J'ai récemment créé un plugin pour la validation de formulaire HTML. Vous pouvez l'essayer vous-même. Prashant-UI-Validator

Construit en utilisant Jquery, supporte Bootstrap et vous pouvez le configurer à votre façon. Il supporte différents types de données comme INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL et surtout votre code de validation javascript personnalisé.

J'espère que ça aide, 

0
prashantchalise

Je sais que cette question est ancienne, mais j'ai rencontré ce problème aussi, alors je publie ma solution.

Si vous souhaitez conserver le plug-in de validation jQuery (qui semble être le meilleur choix) et que vous ne souhaitez pas déplacer la boîte de dialogue comme l'a suggéré Nick Craver, vous pouvez simplement ajouter ceci à la balise <form>:

onsubmit="return false;"

Cela évitera que le formulaire ne soit jamais soumis. Si vous devez le soumettre dans certaines situations spéciales, modifiez cette valeur si nécessaire.

0
mdrg

consultez ce correctif pour le populaire jQuery.validationEngine pour autoriser les balises non-formulaire comme cible de validation.

https://github.com/posabsolute/jQuery-Validation-Engine/pull/101

si vous trouvez que cela en vaut la peine, laissez un commentaire ... dès maintenant, l'auteur ne tirera pas le patch.

0
user406905

J'ai décidé d'utiliser ce plugin de validation jQuery et d'écrire mon propre plugin autour du code existant. 

0
Josh