jQuery UI validation de dialogue sans utiliser balises

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation / semble être le meilleur plugin de validation de jquery là-bas. Je ne peux pas sembler le faire fonctionner dans la boîte de dialogue jQuery UI bien.

Ce code fonctionne en dehors 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 la forme dans ma boîte de dialogue div, un dialogue ouvert, et cliquez sur le lien, il retourne vrai, pas bueno.

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

Answer 1

Dans le cas où quelqu'un d'autre vient à travers cela, la boîte de dialogue jQuery-UI n'ajoute pas à la forme, il ajoute juste avant </body>, de sorte que les éléments sont à valider en dehors de la section <form></form>:

Pour résoudre cela, il suffit de diriger la boîte de dialogue de se déplacer à l'intérieur de la forme lors de sa création, comme ceci:

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

Answer 2

Vous pouvez utiliser le valitidy plug-in 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");       
            }
        }
   });
})

Answer 3

Essayez de donner à votre forme d'un identifiant comme "myform".

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

onclick = "return (. $ (Sous forme () "# myform") valider ().);

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

Answer 4

Nick solution Craver a fonctionné pour moi, mais il ne fonctionne pas pleinement IE7.

Il y a un bug 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 la forme, la superposition sera sur la boîte de dialogue, ce qui empêche l'utilisateur d'interagir avec la boîte de dialogue. Un correctif pour IE7 est de mettre à -1, z-index de la superposition puis cloner l'élément de recouvrement et l'ajouter à la forme comme vous l'avez fait pour la boîte de dialogue. Ensuite, en cas près de la boîte de dialogue, supprimer la superposition cloné. IE7 Z-Index Superposition Questions

En fonction de votre mise en page d'un site Web, vous pourriez être en mesure de se déplacer simplement la superposition et pas besoin de cloner. Je devais cloner, comme ma mise en page de site Web a marges gauche et droite, et je avais besoin la superposition pour couvrir toute la zone. Voici un exemple de ce que je faisais:

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

Answer 5

Cela peut ou peut ne pas être pertinent mais cela a été mon problème et la solution:

J'ai eu exactement le même problème, quand j'ai ouvert la boîte de dialogue mon tag « forme » a obtenu remplacé par un « div », balise.

En effet, je posai la boîte de dialogue dans un élément de forme déjà ouvert, (évidemment, vous ne pouvez pas avoir une forme dans un formulaire)

Ne pas faire ce que je faisais:)

<form>
    <form>

    </form>
</form>

Answer 6

Avez-vous essayé envelopper la forme autour de votre div au lieu (selon les balises de formulaire spécifications W3C ne sont pas autorisés à être à l'intérieur divs.)

Sans réécrivant le plugin que je ne vois pas pourquoi facile de faire cela sans un élément de formulaire.

Answer 7

J'ai décidé d'aller avec ce plugin de validation jQuery et écrire mon propre plug-in autour le code existant.

Answer 8

Je sais que cette question est vieux, mais je suis tombé sur ce problème aussi, donc je poste ma solution.

Si vous voulez garder le plugin de validation jQuery (ce qui semble le meilleur choix) et ne veulent pas se déplacer autour de la boîte de dialogue comme Nick Craver suggéré, vous pouvez simplement ajouter à la balise <form>:

onsubmit="return false;"

Ceci empêchera la forme de jamais être soumis. Si vous devez le présenter dans certaines situations particulières, modifier cette valeur de retour en cas de besoin.

Answer 9

voir ce patch au jQuery.validationEngine populaire pour autoriser les balises non-forme comme cible de validation.

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

si vous trouvez cette peine, laisser un commentaire ... dès maintenant l'auteur ne tire pas le patch.

Answer 10

J'ai récemment créé un plug-in pour la validation du formulaire HTML. Vous pouvez essayer vous-même. Prashant-UI-validateur

Créer en utilisant Jquery, prend en charge Bootstrap et vous pouvez le configurer dans votre chemin. Il prend en charge différents types de données comme INT, STRING, NUMERIC, MAX [Num], MIN [Num], email et plus important encore, votre code de validation javascript personnalisés ainsi.

it helps,

Answer 11

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

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