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?

arviman · Accepted Answer · 2012-03-20 04:02:34Z

33

In case someone else comes across this, the jQuery-UI dialog does not append to the form, it appends 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"));

edited Mar 20, 2012 at 4:02

arviman

5,27546 silver badges48 bronze badges

answered Jan 26, 2010 at 19:48

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Garry English Over a year ago

This doesn't fully work in IE7. See my answer for additional steps.

devio Over a year ago

I think I came across this answer several times during research, before I realized what it means. devio.wordpress.com/2012/07/16/… Thanks!

EliSherer Over a year ago

The new dialog (jquery 1.10) has an appendTo option: $( ".selector" ).dialog({ appendTo: "form:first" });

Sean Mickey · Accepted Answer · 2014-11-13 21:32:06Z

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

iZ. · Accepted Answer · 2009-01-28 22:52:50Z

1

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.

answered Jan 28, 2009 at 22:52

iZ.

5,0615 gold badges25 silver badges16 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:09:10Z

Nick Craver solution worked for me, however it doesn't fully work for IE7.

There is a bug in IE7 where it doesn't respect z-index for nested elements; therefore, if you move the dialog's parent into the form, the overlay will be over the dialog, preventing the user from interacting with the dialog. A fix for IE7 is to set the overlay's z-index to -1, then clone the overlay element and add it to the form just like you did for the dialog. Then in the close event of the dialog, remove the cloned overlay. IE7 Z-Index Layering Issues

Depending on your website layout, you might be able to just move the overlay and no need to clone it. I had to clone it, as my website layout has left and right margins, and I needed the overlay to cover the entire area. Below is an example of what I did:

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

Thanks, Garry

pleshy · Accepted Answer · 2012-11-01 14:50:09Z

1

This may or may NOT be relevant however this was my problem and solution:

I had the exact same issue, when I opened the dialog my "form" tag got replaced with a "div", tag.

This was because I placed the dialog in an already opened form element, (obviously you can't have a form within a form)

Dont do what I did :)

<form>
    <form>

    </form>
</form>

answered Nov 1, 2012 at 14:50

pleshy

1,5282 gold badges16 silver badges23 bronze badges

Comments

Jared · Accepted Answer · 2009-01-28 22:45:12Z

0

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.

answered Jan 28, 2009 at 22:45

Jared

1491 silver badge8 bronze badges

Comments

Josh · Accepted Answer · 2009-01-28 23:25:56Z

0

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

answered Jan 28, 2009 at 23:25

Josh

5,3313 gold badges21 silver badges16 bronze badges

Comments

mdrg · Accepted Answer · 2010-10-25 17:35:55Z

0

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.

answered Oct 25, 2010 at 17:35

mdrg

3,4202 gold badges26 silver badges47 bronze badges

Comments

Amalea · Accepted Answer · 2012-09-10 14:43:58Z

0

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.

edited Sep 10, 2012 at 14:43

Amalea

5261 gold badge6 silver badges17 bronze badges

answered Jul 14, 2011 at 19:50

user406905

1,41616 silver badges16 bronze badges

1 Comment

onder Over a year ago

I am getting error width this page :options is undefined [Break On This Error] options.isError = false;

prashantchalise · Accepted Answer · 2014-07-02 08:59:27Z

0

I have recently created a plugin for HTML Form validation. You can try it yourself.Prashant-UI-Validator

Build using Jquery, supports Bootstrap and you can configure it in your way. It supports different data types like INT, STRING, NUMERIC, MAX[Num], MIN[Num],EMAIL and most importantly your custom javascript validation code as well.

Hope it helps,

answered Jul 2, 2014 at 8:59

prashantchalise

5361 gold badge5 silver badges13 bronze badges

Comments

Diana Eneida · Accepted Answer · 2015-01-28 04:10:12Z

0

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

edited Jan 28, 2015 at 4:10

answered Jan 28, 2015 at 3:23

Diana Eneida

11 bronze badge

Collectives™ on Stack Overflow

jQuery UI Dialog validation without using <form> tags

11 Answers 11

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

3 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related