Skip to main content

Using jQuery validation plugin with fields in a jQuery UI .dialog()

One issue I ran into while using the jQuery UI library along with the jQuery validation plugin in an ASP.NET page is that when the dialog is created, it's moved outside of the page's main form.  jQuery validation requires all fields to be validated to be inside a form, so fields in the dialog won't validate, plus if you need to have server-side controls inside of that dialog, there's not a lot you can do to move the dialog or the form. (If you don't have any server-side controls in the form, read skip further down for an alternate solution) Nested forms aren't allowed, and ASP.NET throws an error if you put server-side controls outside the main form.  An easy (albeit hacky) solution I found was just to move the dialog and its overlay back inside the form tag after creation:

$("#yourDialog").dialog({
    open: function (event, ui) {
        $(".ui-widget-overlay").prependTo("form"); //moves the overlay
    }
}).parent().appendTo("form"); //moves the rest of the dialog


Obviously this is highly dependant on the the "ui-widget-overlay" class name in particular, which could change in future releases of jQuery UI so don't just go copy/pasting this example in a few years and telling me it doesn't work.  This also assumes you don't have any other things to validate outside of the dialog, otherwise you're going to have to use a different solution.

Alternate solution:

As mentioned above, this only works if you don't have any server-side controls inside the dialog.  It's pretty obvious in retrospect so I was debating even mentioning it, but I was confused about this at first so perhaps I can help save someone else a little time!  This issue arose because I needed to add another dialog, and of course putting them both inside the same form made them trigger validation events on both dialogs together, so nothing was ever valid!

Solution: move all dialogs outside of the main form tag, and add a form tags inside of each dialog. Validate each form separately, then post the information to a webmethod using AJAX.  That's it!

Comments

Popular posts from this blog

"A section using 'configSource' may contain no other attributes or elements" error after installing Application Insights

After installing the Application Insights nuget package to an Umbraco solution, you'll get this error:

A section using 'configSource' may contain no other attributes or elements

<ExamineLuceneIndexSets configSource="config\ExamineIndex.config" />
     <log4net configSource="config\log4net.config">
         <root>
             <level value="ALL" />
             <appender-ref ref="aiAppender" />
Source File: \project\web.config

This happens because part of the Application Insights installation process adds a <log4net> section to web.config.  Which would make sense, except Umbraco already has a <log4net> section in /config/log4net.config.  So as you can imagine, the solution is to manually move everything its added into that file. Unfortunately you can't just copy/paste the whole lot, but it's not particularly complicated:


Move <appender-ref ref="aiAppender" /> into the lo…

Using WiX to create an event source during install of a .NET framework project

Edit: so I guess I wasn't the only one confused with this stuff, as it's been my most popular post by far!  If I've helped you out or saved you some time, please let me know in the comments :)

In order for this to work, you have to add references to WixUtilExtension and WixNetFxExtension to your WiX project.  Once that's done, add this inside a <Component> element:

<Util:EventSourcexmlns:Util="http://schemas.microsoft.com/wix/UtilExtension"Name="EVENTSOURCEGOESHERE"Log="Application"EventMessageFile="[NETFRAMEWORK40FULLINSTALLROOTDIR]EventLogMessages.dll" />
Obviously replace EVENTSOURCEGOESHERE with your event source name.  NETFRAMEWORK40FULLINSTALLROOTDIR is a property set by the WixNetFxExtension which stores the path to the .NET framework v4 directory, but you can replace this with the corresponding property for the directory containing the relevant EventLogMessages.dll file.  So if you're using the .NET framewo…

How to make yourself a Dynamics CRM 2011 Deployment Administrator

Today I needed to deactivate one of our Dynamics organisations, but when I opened the Dynamics Deployment Manager, I received the following error:

"Only the Deployment Administrators are able to use Deployment Manager. You are not a Deployment Administrator."
Bummer. I did a bit of Googling and found this post by Ronald Lemmen (thanks for pointing me in the right direction!).  Since the Dynamics Deployment Manager is obviously checking the MSCRM_CONFIG database for this information I attached a database trace to it and found that it's executing these queries (among many others):

exec sp_executesql N'SELECT  Id, [DefaultOrganizationId], [IsDisabled], [Name]   FROM [SystemUser]   WHERE ((([Name] = @Name0)) ) AND (IsDeleted = 0) ', N'@Name0 nvarchar(41)',@Name0=N'{My windows domain account}'
exec sp_executesql N'SELECT  Id, [Name], [UniqueifierId]   FROM [SecurityRole]   WHERE ((([Name] = @Name0)) ) AND (IsDeleted = 0) ', N'@Name0 nvarchar…