This week I found a peculiar problem while trying to do validation inside a jQuery UI dialog box. Validation, although properly configured, would not happen, it would always show as valid.
This is the form, it is using the jquery.validation and the jquery.ui.dialog components.
1: <form id="form1" runat="server">
2: <div id="dialog"></div>
3: <input type="button" id="load" value="Load Form" />
4: </form>
5:
6: <script type="text/javascript">
7:
8: $(function() {
9:
10: $('#form1').validate();
11:
12: $('#load').click(function() {
13: $.get('_form.aspx', function(data) {
14: $('#dialog').html(data);
15: $('#dialog').dialog();
17: });
18: });
19:
20: });
21:
22:
23: </script>
as you can see it is doing an ajax request to load the form. It then brings up the dialog box. Notice that the dialog div is inside the form therefore I’m expecting the loaded page to render within the form tag of the current page. This is the form that is loaded:
<input type="text" id="subject" class="required" />
<input type="submit" value="Submit Form" />
The problem is that the UI dialog will add a wrapper div and place it outside the form tag. It then moves the dialog div to be within it, effectively moving it outside the form. Therefore validation does not work as it is outside the form tag.
To fix this we write this simple line of code to reverse the process and move the dialog wrapper to be within the form tag.
$('#dialog').parent().appendTo($('#form1'));
It took me a little while to figure this out, and hopefully this will save you some time.
Cheers!
Posted by Julia on August 12, 2009 at 11:05 am
Thank you very much!!!
Posted by Mitch Labrador on August 14, 2009 at 9:19 am
@Julia Glad it helped, Cheers!
Posted by Steve on August 19, 2009 at 12:11 pm
Thank you for this. I can’t believe how much time I wasted trying to figure this out. I was able to narrow it down to possibly dropping the code out of the form field, but it took me a good couple of hours to get there.
Posted by Mitch Labrador on August 24, 2009 at 1:41 pm
I know what you mean, it took me some time to figure this one out. Glad to be of assistance.
Posted by sushil on October 13, 2009 at 3:34 am
Mitch,
where should be place this $(‘#dialog’).parent().appendTo($(‘#form1′)); line of code after the dialog opens or before opening the dialog..
Posted by Patrick Barnes on November 17, 2009 at 12:24 pm
Place the code in the handler for the open event, which can be set in the dialog options, e.g.:
….
open: function() {
$(‘#dialog’).parent().appendTo($(‘#form1′));
}
…
or, if you use the dialogClass option you can drop “parent()”, e.g.:
….
dialogClass: ‘myDialogClass’,
open: function() {
$(‘.myDialogClass’).appendTo($(‘#form1′));
}
…
Posted by kee on October 14, 2010 at 3:41 am
Thank you very much!!!
Posted by LenardG on March 22, 2011 at 5:33 am
Thanks very much for this info!
This still seems to be an issue with jQuery Validation and UI (one and a half years after the original post). It took me quite some time to figure out the problem lied with the two plugins, from there Google found your post.
Posted by Mitch Labrador on March 22, 2011 at 8:32 am
Hi Lenard, I’m glad it helped.
–Cheers!
Posted by ew on April 1, 2011 at 2:20 pm
I tried this using the dialog parent approach but the form was still outside the dislog
now ive tried the class approach, but it seems to have taken all the form fields from the dialog and put them in the page that launched the dialog ! any ideas?
example
$(document).ready(function(){
$(“#dialogForm”).dialog({
dialogClass: ‘dialog-form’,
open: function(){$(“.dialog-form”).appendTo(“#blaform”);},
autoOpen: false,
height: 500,
width: 550,
modal: true,
buttons: {
“Ok”: function(){
$(“#blaForm”).validate();
//$(this).dialog(“close”);
},
Cancel: function(){
$(this).dialog(“close”);
}
},
close: function(){
}
});
$(“#bubbleArea”).click(function(){
$(“#dialogForm”).dialog(“open”);
$(“input[name=question]“).val($(“#bubbleQuestion”).text());
$(“input[name=location]“).val($(“#bubbleLocation”).text());
});
});
Options:
Question
Location
Minimum star rating
Maximum star rating
Additional Comment
xxxx xxxxxxx?
Posted by maidot on April 17, 2011 at 6:24 am
Thanks man, this problem almost killing me whole day~
Posted by Mitch Labrador on April 17, 2011 at 7:45 am
I’m glad it helped!
Posted by Kathleen on May 1, 2011 at 5:01 pm
Thanks Mitch, you saved my bacon!
Posted by Mitch Labrador on May 1, 2011 at 7:28 pm
Hi Kathleen,
I’m glad it helped!
Regards, Mitch
Posted by sean on July 16, 2011 at 2:26 pm
Mitch, thanks for this. I have been trying to modify the mvc 3 unobtrusive library to use a jquery dialog to display errors (wrapping the Html.ValidationSummary in a dialog container) and with the disassociation from the form, any validation message changes would not get reflected in the error container and this fixed it.
Posted by Mitch Labrador on July 18, 2011 at 7:56 am
Hi Sean, I’m glad this helped.
Cheers!
Mitch
Posted by Maciej on February 3, 2012 at 8:57 am
YES YES YES YES
I owe you a beer, sir !