color jquery validation jquery-ui jquery-plugins jquery-validate

color - jquery ui tooltip html



validación jQuery UI Dialog sin usar etiquetas<form> (11)

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ parece ser el mejor complemento de validación de jquery. Parece que no puedo hacerlo funcionar en el cuadro de diálogo de la interfaz de usuario jQuery.

Este código funciona fuera del diálogo 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>

Esto funciona genial Cuando muevo el formulario a mi cuadro de diálogo, abra el cuadro de diálogo y haga clic en el enlace que devuelve true, no bueno.

¿Hay alguna forma de utilizar este plugin de validación jquery asesino sin tener que usar la etiqueta <form> ? ¿O hay una forma aún mejor de hacerlo con éxito?

¿Has intentado envolver el formulario alrededor de tu div en su lugar (de acuerdo con las etiquetas de formularios de especificaciones W3C no se permite estar dentro de divs).

Sin volver a escribir el complemento, no veo una razón fácil de hacerlo sin un elemento de formulario.

En caso de que alguien más se encuentre con esto, el cuadro de diálogo jQuery-UI no se agrega al formulario, se agrega justo antes de </body> , por lo que los elementos a validar están fuera de la sección <form></form> :

Para resolver esto, solo dirija el cuadro de diálogo para moverse dentro del formulario cuando lo crea, así:

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

Esto puede o no ser relevante, pero este fue mi problema y mi solución:

Tuve exactamente el mismo problema, cuando abrí el diálogo mi etiqueta "form" fue reemplazada con una etiqueta "div".

Esto fue porque coloqué el cuadro de diálogo en un elemento de formulario ya abierto, (obviamente no se puede tener un formulario dentro de un formulario)

No hagas lo que hice :)

<form> <form> </form> </form>

Intente darle a su formulario una identificación como "myform".

Luego intente agregar esta llamada al evento onclick de su anclaje de prueba de clic:

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

en lugar de hacer la validación en el documento. listo.

La solución de Nick Craver funcionó para mí, sin embargo, no funciona del todo para IE7.

Hay un error en IE7 donde no respeta el índice Z para elementos anidados; por lo tanto, si mueve el elemento primario del diálogo al formulario, la plantilla se colocará sobre el cuadro de diálogo, lo que impedirá que el usuario interactúe con el cuadro de diálogo. Una solución para IE7 es establecer el índice z de la superposición en -1, luego clonar el elemento de superposición y agregarlo al formulario tal como lo hizo para el cuadro de diálogo. Luego, en el evento cerrado del diálogo, elimine la superposición clonada. Problemas de IE7 Z-Index Layering

Según el diseño de su sitio web, es posible que solo pueda mover la superposición y no sea necesario clonarla. Tuve que clonarlo, ya que el diseño de mi sitio web tenía márgenes izquierdo y derecho, y necesitaba la superposición para cubrir toda el área. A continuación hay 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

Puedes usar el plugin valitidy 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"); } } }); })

Recientemente he creado un complemento para la validación de formularios HTML. Puedes probarlo tú mismo. Prashant-UI-Validator

Build usando Jquery, es compatible con Bootstrap y puede configurarlo en su camino. Es compatible con diferentes tipos de datos como INT, STRING, NUMERIC, MAX [Num], MIN [Num], EMAIL y lo más importante es su código de validación de JavaScript personalizado también.

Espero eso ayude,

Sé que esta pregunta es antigua, pero también me encontré con este problema, así que estoy publicando mi solución.

Si desea mantener el complemento de validación jQuery (que parece ser la mejor opción) y no desea mover el diálogo como lo sugirió Nick Craver, simplemente puede agregarlo a la etiqueta <form> :

onsubmit="return false;"

Esto evitará que se envíe el formulario. Si necesita enviarlo en algunas situaciones especiales, cambie este valor de retorno cuando sea necesario.

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