validación de jQuery UI de diálogo sin utilizar etiquetas

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation / parece ser el mejor plugin de validación de jQuery por ahí. Me parece que no puede conseguir que funcione en el diálogo jQuery UI sin embargo.

Este código trabaja fuera de la DIV de diálogo:

<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>

Esto funciona muy bien. Cuando muevo la forma en mi div de diálogo, el diálogo abierto, y haga clic en el enlace que devuelve verdadero, no bueno.

¿Hay alguna manera de utilizar este asesino jQuery plugin de validación sin tener que utilizar la etiqueta <form>? ¿O hay una mejor manera de hacer esto con éxito?

Answer 1

En caso de que alguien se encuentra con esto, el cuadro de diálogo jQuery-UI no se anexe a la forma, añade justo antes de </body>, por lo que los elementos para validar están fuera de la sección <form></form>:

Para resolver esto, simplemente dirigir el diálogo para moverse a sí mismo dentro de la forma cuando se crea, de esta manera:

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

Answer 2

Puede utilizar el valitidy plugin de jQuery

El 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

Trate de darle forma un identificador como "myform".

A continuación, trate de añadir esta llamada al evento onclick de su ancla clicktest:

onclick = 'return (. $ ( "# Myform") validar () forma ().);'

en lugar de hacer la validación en el document.ready.

Answer 4

Nick Craver solución que funcionó para mí, sin embargo, no funciona completamente para IE7.

Hay un error en IE7 donde no respeta z-índice para elementos anidados; Por lo tanto, si se mueve el padre del diálogo en la forma, la superposición será el diálogo, evitando que el usuario interactúa con el diálogo. Una solución para Internet Explorer 7 es establecer z-index de la superposición a -1, entonces clonar el elemento de superposición y añadirlo a la forma como lo hizo para el diálogo. Luego, en el evento de cierre del cuadro de diálogo, eliminar la superposición clonado. IE7 Índice Z Problemas Layering

Dependiendo de su diseño de página web, es posible que pueda pasar simplemente la superposición y sin necesidad de clonarlo. Tenía que clonarlo, como mi diseño de página web ha márgenes izquierdo y derecho, y necesitaba la superposición para cubrir toda el área. A continuación se muestra un ejemplo de lo que hice:

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

Gracias, Garry

Answer 5

Esto puede o no ser relevantes sin embargo, esto era mi problema y la solución:

Yo tenía el mismo problema exacto, cuando abrí el diálogo de mi etiqueta de "forma" quedó sustituido por un "div", etiqueta.

Esto se debía a que coloqué el cuadro de diálogo en un elemento de formulario ya abierto, (obviamente no se puede tener una forma dentro de un formulario)

¡No lo haga lo que hice:)

<form>
    <form>

    </form>
</form>

Answer 6

¿Usted ha intentado envolver la forma alrededor de su div lugar (según la especificación del W3C etiquetas de formulario no se les permite estar dentro de divs.)

Sin re-escribir el plugin no veo por qué un fácil de hacer esto sin un elemento de formulario.

Answer 7

He decidido ir con este jQuery plugin de validación y escribir mi propio plugin de alrededor el código existente.

Answer 8

Sé que esta pregunta es viejo, pero me encontré con este problema también, así que les dejo mi solución.

Si desea mantener jQuery plugin de validación (que parece ser la mejor elección) y no quieren mover el diálogo en torno al igual que Nick Craver sugirió, sólo tiene que añadir esto a la etiqueta <form>:

onsubmit="return false;"

Esto evitará que la forma de cada vez que se envía. Si necesita para enviarlo en algunas situaciones especiales, cambiar este valor de retorno cuando sea necesario.

Answer 9

ver este parche a la jQuery.validationEngine populares para permitir que las etiquetas no forman como objetivo la validación.

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

Si usted encuentra esta pena, dejar un comentario ... a partir de ahora el autor no se tire el parche.

Answer 10

He creado recientemente un plugin para la validación de formularios HTML. Puede hacerlo por uno mismo. Prashant-UI-Validador

Construir usando jQuery, apoya Bootstrap y se puede configurar en su camino. Es compatible con diferentes tipos de datos como int, String, numéricos, MAX [Num], MIN [Num], de correo electrónico y lo más importante es el código JavaScript personalizado de validación también.

Espero que ayuda,

Answer 11

He utilizado esta una funciona en IE8, en una aplicación asp.net utilizando jQuery 1.11.2 y 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
    })