Home » jQuery » jQuery Dialog – With Validation Controls

jQuery Dialog – With Validation Controls


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" 
        <asp:TextBox ID="TextBox1"
         ErrorMessage="Enter your name" 
        <br />
        <asp:Button ID="Button1" 
         runat="server" Text="Button" 
         ValidationGroup="Dialog" />

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 – 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 […]
  • jQuery, JSON, and ASP.NETjQuery, JSON, and ASP.NET A few months ago, I demonstrated how to use ASP.NET's JSON capabilities.  Lately, I've been demonstrating how to use jQuery.  Both use a considerable amount of JavaScript so if there is […]
  • 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 […]
  • jQuery SplitterjQuery Splitter Hey!  This is pretty cool. I was just mentioning at the last jQuery presentation I did that there were some controls that were definitely missing from the jQuery UI suite of […]
  • jQuery – Using Slider as a ScrollbarjQuery – Using Slider as a Scrollbar Last week I introduced the jQuery UI element known as a slider and indicated that this control could easily be used as a custom scrollbar.Today I'm going to show you exactly how […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

One Pingback/Trackback