jQuery Dialog – With Validation Controls

sahara

Chances are, you’ll eventually want to use a dialog box in combination with some form elements, and when you do, you’ll probably want to implement some validation.

True, there are some great validation routines available in jQuery, but they only validate on the client side.  They are, after all, Javascript.

As you are probably aware, the advantage of using validation controls with ASP.NET is that they validate on both the client side and the server side and even if we assume that everyone using our web page is using Javascript and has it turned on, there is still the possibility that someone will turn Javascript off so they can circumvent your validations.

So how do we use validation controls AND allow the form to be a jQuery dialog?

First, let’s set up a simple web form that we can turn into a dialog.  I suggest using a panel control to put all of our form elements in so that we can set the default button.  We will then wrap the panel in a DIV tag that will become our dialog.

Here is our main HTML for the form

    <div id="dialog" title="Enter your name">
    <asp:Panel DefaultButton="Button1" 
     ID="Panel1" runat="server">
        <asp:Label ID="Label1" 
         runat="server" 
         Text="Name:"></asp:Label>
        <asp:TextBox ID="TextBox1"
         runat="server" 
         ValidationGroup="Dialog"></asp:TextBox>
        <asp:RequiredFieldValidator 
         ID="RequiredFieldValidator1" 
         runat="server" 
         ControlToValidate="TextBox1" 
         Display="Dynamic" 
         ErrorMessage="Enter your name" 
         ValidationGroup="Dialog">
        </asp:RequiredFieldValidator>
        <br />
        <asp:Button ID="Button1" 
         runat="server" Text="Button" 
         ValidationGroup="Dialog" />
    </asp:Panel></div>

There are a couple of things to note:

  1. I’ve used the DefaultButton property to tell .NET that Button1 should fire if I’m in a control inside this dialog and I press the enter key.  You’ll need this if the page has other forms on it.
  2. I’ve also set the ValidationGroup for all of the appropriate controls on the page.  This is particularly important.  If you have other buttons that cause a postback that are not in the dialog, it will still try to run the validations because, as far as .NET is concerned the validation controls are visible and should be run.  By making them part of a validation group they will only fire when the Button1 control causes the post back.

Next, we’ll want to turn this all into a dialog.  We do that in our Javascript file using the familiar syntax

$("#dialog").dialog({ modal: true,
    bgiframe: true
});

As long as all of your validation controls use client side validation, this should be all you need.

 

Other post in jQuery

Related Post

  • jQuery – DialogjQuery – Dialog Ever since pop-up windows became “evil” in the web development world, developers have been looking for other ways to achieve the same effect.  The most common method is to use some sort of ab...
  • jQuery – Modal DialogjQuery – Modal Dialog Last week I introduced the jQuery Dialog plugin, which allows us to put various dialogs on the screen. I only gave out the basics of this flexible widget to keep things simple.  Today, I wan...
  • ASP.NET Validation Controls.  Friend or Foe?ASP.NET Validation Controls. Friend or Foe? This comes up on the message boards quite frequently.  The question normally starts out as, "How do I _________ with the _____ validation control?"  Or, if they are really looking for a solution ra...
  • jQuery – Date PickerjQuery – Date Picker Today we’ll start taking a look at the final control in the jQuery UI suite.  The Date Picker. This control, as with all the other controls we’ve looked at, is relatively simple as long as...
  • jQuery – Retrieving HTML FragmentsjQuery – Retrieving HTML Fragments A couple of weeks ago I mentioned that I had built a tooltip using jQuery.  We focused mostly on the positioning of the tooltip at the time because, historically, that's where most of the work has...