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 dial

Answer 1

You can use the valitidy 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();
                    $(".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 2

see this patch to the popular jQuery.validationEngine to allow non-form tags as validation target.

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

if you find this worth while, leave a comment... as of now the author will not pull the patch.

Answer 3

I used this an it works in IE8, on an asp.net application using jQuery 1.11.2 and 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
    })

Answer 4

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

Answer 5

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.