In this article I will explain how to display ASP.Net Validation Summary in jQuery modal dialog popup as shown below.
Directly it is not possible to display jQuery Modal Dialog popup when ASP.Net Validation fails, hence I had to override the WebForm_OnSubmit method.
You need to follow the following steps.
1. Add a HTML DIV control validation_dialog for jQuery Modal Dialog popup and place the ASP.Net ValidationSummary control inside it.
2. For all the ASP.Net Validators set Display property to None.
3. Finally place the following script in start of your formTag or ContentPlaceHolder and done!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
The complete page HTML markup is given below.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/Blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" Display="None" ControlToValidate="txtName"
runat="server" ErrorMessage="Name is required."></asp:RequiredFieldValidator>
<br />
Email:
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" Display="None" ControlToValidate="txtEmail"
runat="server" ErrorMessage="Email is required."></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</form>
</body>
</html>
Demo
Downloads
