jQuery UI Dialog validation without using <form> tags

Question

http://bassistance.de/jquery-plugins/jquery-plugin-validation/ looks to be the best jquery validation plugin out there. I can't seem to get it working in the jQuery UI dialog though.

This code works outside of the dialog 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>

This works great. When i move the form into my dialog div, open dialog, and click the link it returns true, no bueno.

Is there any way to use this killer jquery validation plugin without having to use the <form> tag? Or is there an even better way of doing this successfully?

Answer 1

Have you tried wrapping the form around your div instead (according to the W3C spec form tags are not allowed to be inside divs.)

Without re-writing the plugin I do not see an easy why of doing this without a form element.

Answer 2

Try giving your form an id like "myform".

Then try adding this call to the onclick event of your clicktest anchor :

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

instead of doing the validation in the document.ready.

Answer 3

See this answer; it may be of some help.

Answer 4

I've decided to go with this jQuery validation plugin and write my own plugin around the existing code.

Answer 5

You can use the validy jquery plugin

The 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(); $(this).dialog("close");
}
},
"Cancel": function() { $(this).dialog("close"); } } }); })

Answer 6

In case someone else comes across this, the jQuery-UI dialog does not append to the form, it appends to the just before </body>, so the elements to validate are outside the <form></form> section:

To resolve this, just direct the dialog to move itself inside the form when you create it, like this:

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

Answer 7

Hi every one, mi dialog validation works fine.. but crash in IE6 (yes.. I know). It gives me an awful error in line 783472834723 and I dont have that much lines.

Any idea why?

heres the code:

        $('[name=editarPasajero]').click(function() {
            $('#dialogoEditarPasajero').dialog('open');
        });

        $('#dialogoEditarPasajero').dialog({
             autoOpen: false,
             bgiframe: true, 
             modal: true,
             width: 720,
             height: 450,
             open: function(event, ui) {$("#dialogoEditarPasajero").load('../ajax/editarPasajero.do?indiceDePasajeroElegido='+indiceDePasajero);},
             buttons: {

                        No : function () { $(this).dialog('close');
                                            return false;},
                        Si : function (){   if(jQuery('#editarPasajeroForm').validate().checkForm()){
                                                alert('valor: '+jQuery('#editarPasajeroForm').validate().checkForm())
                                                $(this).dialog('close');
                                                $.ajax({
                                                      url: "../ajax/guardarPasajero.do",
                                                      data: $('#editarPasajeroForm').serialize(),
                                                      success: function(html){
                                                        $("#dialogoEditarPasajero").empty().append(html);
                                                      }
                                                    });
                                                return false;
                                            }else{
                                                jQuery('#editarPasajeroForm').submit()
                                            }
                                        }
             }                      
         });

I have the rules and messages in the page I load() in the dialog.. AJAX.

        $("#editarPasajeroForm").validate({
            rules: {
            "currentPasajero.direccion": "required",
            "currentPasajero.provincia": "required",
            "currentPasajero.ciudad": "required",
            "currentPasajero.codigoPostal": "required",
            "currentPasajero.telefono": "required",
            "currentPasajero.telefonoContacto": "required",
            "currentPasajero.email": {
                required:true,
                email: true
                },
            "currentPasajero.nombreContacto": "required",
            },
            messages: {
                "currentPasajero.direccion": {
                    required: "Debe Completar una Direccion"
                },
                "currentPasajero.provincia": {
                    required: "Debe Completar una Provincia"
                },
                "currentPasajero.codigoPostal": {
                    required: "Debe Completar un Codigo Postal"
                },
                "currentPasajero.ciudad": {
                    required: "Debe completar una Ciudad"
                },
                "currentPasajero.email": {
                    email: "Debe Ingresar un formato valido de e-mail. Ej: [email protected]",
                    required: "Debe completar un e-Mail"
                },
                "currentPasajero.telefonoContacto": {
                    required: "Debe completar un numero de Telefono"
                },
                "currentPasajero.telefono": {
                    required: "Debe completar un numero de Telefono"
                },
                "currentPasajero.nombreContacto": {
                    required: "Debe Completar un Contacto"
                }
              }
        });

Thanks!!

Answer 8

I know this question is old, but I came across this problem too, so I'm posting my solution.

If you want to keep jQuery validation plugin (which seems the best choice) and don't want to move the dialog around like Nick Craver suggested, you can simply add this to the <form> tag:

onsubmit="return false;"

This will prevent the form from ever being submitted. If you need to submit it in some special situations, change this return value when needed.