Example of Adding a JQuery Modal Dialog Warning on Blur to an ASP.NET Text Box

In this article I will review how to set up a basic JQuery UI Dialog widget to act as a modal alert box that warns the user of a possible problem when they move away from an HTML form field. The traditional JavaScript alert command is functional but doesn’t look very nice but since you can style the markup for the JQuery UI Dialog widget in pretty much any way you like, it makes a lot of sense to use the JQuery dialog instead of a JavaScript alert box.

Although the title of this article specifically mentions ASP.NET, the code is easily applicable to any server-side language or to pure HTML/JavaScript markup. I will show the example using ASP.NET since the controls it renders at the server-side are dynamically named, so this is a perfect opportunity to show how to reference a server-side control with an auto-generated ID in JQuery.

If you do like this article and find it useful, leave a comment below since I always like feedback. Also, you can check out other JQuery articles I have written that may also be of interest to you.

The Desired Behavior

I would like this example page to be similar to most HTML form pages. I’m including some random fields and text, and intend to add validation logic and a warning to one of the form fields. I intend the result to look like the screen-shot at the start of this article. Here are the requirements in point-form:

• Basically I want the example page to look like a standard HTML form.
• The first form text input field requires a data check so that the value entered by the user shouldn’t be higher than 10.
• If the value is higher than 10 then I want a modal JQuery UI warning dialog to appear when the user moves away from the field (on blur).
• The dialog should be aligned so that it is flush with the field.

Setting up the Basic Page

Once we have set up the basic HTML and/or ASP.NET structure of the Web form we need to set the text for the dialog widget. We do so using a <div tag in the HTML at the end of the page.  The ID that we give this <div is important as we will reference it in the JQuery code. In this example we give the <div an ID of dialog-warning so that its function is quickly obvious. Within the <div we can use table and paragraph formatting to structure the appearance of our modal dialog.

In the script tags for our JQuery, we instantiate our modal dialog in the standard way including an OK button with simple close behavior. I have pulled this example code from the example code for a Dialog Message on the JQuery UI Web site. However I added the autoOpen:false argument to make sure that our dialog remains hidden at creation before it needs to be used as a warning.

Here is the code that instantiates our dialog widget:

$(function () {
 $("#dialog-warning").dialog({
 modal: true,
 autoOpen: false,
 buttons: {
 Ok: function () {
 $(this).dialog("close");
 }
 }
 })

Hooking Up the Dialog to the Text Field

We want our modal JQuery dialog to act as a warning message to users if they have entered a value greater than 10 into the first form field Text Area and then try to move away from the field.

In this example the first form field is an ASP.NET Web control that innately has an auto-generated ID. We can reference the field dynamically using server-side code in the JQuery listening event for the form field:

$('#<%=form1.FindControl("Text1").ClientID %>').blur(function () {

As you can see this is a mix of the JQuery blur function and ASP.NET tags that will output the dynamically generated ID of the text area using the ASP.NET syntax of FindControl( to identify our text area, and .ClientID to find the generated control ID.

The JQuery function then checks if the user-provided value is greater then 10 by finding the value of the field undergoing the blur event using $(this).val(); and using the parseInt function on the user-entered value to make sure that a numeric comparison is possible.

var setNumber = parseInt($(this).val());
if (setNumber > 10) {

If you prefer your code to be more terse then you could condense these lines into:

if (parseInt($(this).val())> 10) {

Finally we add the code to display our modal dialog. We also set its position dynamically to be flush underneath the calling element using:

$(“#dialog-warning”).dialog(“open”);
$(“#dialog-warning”).dialog(“option”, “position”, { my: “left top”, at: “left bottom”, of: this });

As you can see, the dialog(“open”) command displays the dialog and the dialog(“option” command allows us to set the top left corner of the dialog to the bottom left margin of the calling element (using the this keyword to identify the element).

The Full Example Code

Here I’m including a fully functional example page that will render like the screen capture shown at the start of this article. The server-side language has been set to VB.NET and an ASP.NET Text Area control, but really you can use any server-side language that you prefer.

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
 <title></title>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
 <script language="javascript" type="text/javascript">
 $(function () {
 $("#dialog-warning").dialog({
 modal: true,
 autoOpen: false,
 buttons: {
 Ok: function () {
 $(this).dialog("close");
 }
 }
 });
 $('#<%=form1.FindControl("Text1").ClientID %>').blur(function () {
 var setNumber = parseInt($(this).val());
 if (setNumber > 10) {
 $("#dialog-warning").dialog("open");
 $("#dialog-warning").dialog("option", "position", { my: "left top", at: "left bottom", of: this });
 }
 });
 });
 </script>
 </head>
 <body>
 <form id="form1" runat="server">
 Please enter a value of not more than 10: <asp:TextBox ID="Text1" runat="server" Width="52"></asp:TextBox>
 <br />
 Some other non-relevant Form Field: <input id="Text2" type="text" />
<!-- HERE IS THE WARNING DIALOG TEXT -->
 <div id="dialog-warning" title="Warning - A Large Value">
 <p>
 <span style="float: left; margin: 0 7px 50px 0;"></span>
 You have selected a large value that is greater than 10.
 </p>
 <p>
 Please make sure to change your selection to a value of 10 or less.
 </p>
 </div>
</form>
 </body>
 </html>