web-dev-qa-db-ger.com

jQuery UI Dialogvalidierung ohne Verwendung von <form> -Tags

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Es scheint das beste Jquery-Validierungs-Plugin zu sein. Ich kann es jedoch nicht im jQuery-UI-Dialog zum Laufen bringen.

Dieser Code funktioniert außerhalb des Dialogs 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>

Das funktioniert super. Wenn ich das Formular in mein Dialogfeld div schiebe, öffne das Dialogfeld und klicke auf den Link, den es als wahr zurückgibt, kein Bueno.

Gibt es eine Möglichkeit, dieses Killer-Jquery-Validierungs-Plugin zu verwenden, ohne den Tag <form> verwenden zu müssen? Oder gibt es einen noch besseren Weg, dies erfolgreich zu tun?

32
Josh

Falls jemand anderes darauf stößt, wird das jQuery-UI-Dialogfeld nicht an das Formular angehängt. Es hängt unmittelbar vor </body> an, sodass sich die zu überprüfenden Elemente außerhalb des <form></form>-Abschnitts befinden:

Um das Problem zu beheben, weisen Sie das Dialogfeld so an, dass es sich beim Erstellen innerhalb des Formulars bewegt.

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

Sie können das Jquery-Plugin valitidy verwenden

Das 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

Geben Sie Ihrem Formular eine ID wie "myform".

Versuchen Sie dann, diesen Aufruf zum Onclick-Ereignis Ihres Klick-Ankers hinzuzufügen:

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

anstatt die Validierung in der document.ready durchzuführen.

1
iZ.

Nick Craver-Lösung hat für mich funktioniert, für IE7 jedoch nicht voll.

Es gibt einen Fehler in IE7, bei dem der z-Index für geschachtelte Elemente nicht berücksichtigt wird. Wenn Sie also das übergeordnete Dialogfeld des Dialogfelds in das Formular verschieben, wird die Überlagerung über dem Dialogfeld angezeigt, sodass der Benutzer nicht mit dem Dialogfeld interagieren kann. Ein Fix für IE7 besteht darin, den Z-Index des Overlays auf -1 zu setzen, das Overlay-Element zu klonen und es wie im Dialog zum Formular hinzuzufügen. Entfernen Sie anschließend beim Schließen des Dialogs das geklonte Overlay. IE7 Z-Index - Probleme mit dem Layering

Abhängig von Ihrem Website-Layout können Sie die Überlagerung möglicherweise verschieben und müssen nicht geklont werden. Ich musste es klonen, da mein Website-Layout linken und rechten Rand hat und ich die Überlagerung benötigte, um den gesamten Bereich abzudecken. Unten ist ein Beispiel von dem, was ich getan habe:

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');
}

Danke, Garry

1
Garry English

Dies kann oder ist NICHT relevant, aber dies war mein Problem und meine Lösung:

Ich hatte genau das gleiche Problem, als ich den Dialog öffnete, wurde mein "form" -Tag durch ein "div" -Tag ersetzt.

Dies liegt daran, dass ich den Dialog in ein bereits geöffnetes Formularelement eingefügt habe (natürlich können Sie kein Formular in einem Formular haben)

Tu nicht was ich getan habe :)

<form>
    <form>

    </form>
</form>
1
pleshy

Ich habe dies verwendet und es funktioniert in IE8, in einer asp.net-Anwendung, die jQuery 1.11.2 und jQueryValidate 1.13.1 verwendet:

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

Haben Sie versucht, das Formular stattdessen um Ihr div zu wickeln (gemäß den W3C-Spezifikationen dürfen Form-Tags nicht innerhalb von divs sein.)

Ohne das Plugin umzuschreiben, sehe ich keinen einfachen Grund, dies ohne ein Formularelement zu tun.

0
Jared

Ich habe kürzlich ein Plugin für die Validierung von HTML-Formularen erstellt. Sie können es selbst ausprobieren. Prashant-UI-Validator

Mit Jquery erstellen, unterstützt Bootstrap und kann auf Ihre Art konfiguriert werden. Es unterstützt verschiedene Datentypen wie INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL und vor allem Ihren benutzerdefinierten Javascript-Validierungscode.

Ich hoffe es hilft, 

0
prashantchalise

Ich weiß, diese Frage ist alt, aber ich bin auch auf dieses Problem gestoßen, deshalb poste ich meine Lösung.

Wenn Sie das jQuery-Validierungs-Plugin beibehalten möchten (was die beste Wahl ist) und den Dialog nicht wie von Nick Craver empfohlen verschieben möchten, können Sie dies einfach dem <form>-Tag hinzufügen:

onsubmit="return false;"

Dadurch wird verhindert, dass das Formular jemals gesendet wird. Wenn Sie es in bestimmten Situationen einreichen müssen, ändern Sie diesen Rückgabewert bei Bedarf.

0
mdrg

sehen Sie sich diesen Patch für die beliebte jQuery.validationEngine an, um Nicht-Form-Tags als Validierungsziel zuzulassen.

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

wenn Sie es für sinnvoll halten, hinterlassen Sie einen Kommentar ... ab sofort wird der Autor den Patch nicht ziehen.

0
user406905

Ich entschied mich für dieses jQuery-Validierungs-Plugin und schreibe mein eigenes Plugin um den vorhandenen Code. 

0
Josh