Home > ASP.Net, Jquery > Validation Summary Popup UI Modification with JQuery

Validation Summary Popup UI Modification with JQuery


Hi all,

try this example to use Validation Summary as Popup with JQuery


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <style>
 .itemContent
 {
 margin:2px 0px 2px 0px;
 clear:both;
 border-width:0px;
 }
 .itemContent label
 {
 display:block;
 float:left;
 margin-right:5px;
 width:150px;
 text-align:right;
 }
 .itemContent div.controls
 {
 display:block;
 float:left;
 }
 </style>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
 <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
 <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />

 <script type="text/javascript">
 $(document).ready(function() {
 $("#btnSaveInfo").click(function() {
 document.TimeID = setTimeout("checkMessage()", 5);
 });
 });
 function checkMessage() {
 if ($("div#vsInfo").length > 0) {
 $("#dialog").empty();
 $("#dialog").append($("div#vsInfo UL"));
 $("#dialog").dialog({
 title: $("div#vsInfo").text(),
 close: function(event, ui) {
 clearTimeout(document.TimeID);
 }
 });
 clearTimeout(document.TimeID);
 }
 else
 document.TimeID = setTimeout("checkMessage()", 5);
 }
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="dialog" style="display:none">
 </div>
 <div class="itemContent">
 <label></label>
 <div class="controls" style="display:none">
 <asp:ValidationSummary ID="vsInfo" runat="server" HeaderText="Following error occurs:"
 ShowMessageBox="false" ShowSummary="true" DisplayMode="BulletList" />
 </div>
 </div>
 <div class="itemContent">
 <label>First name</label>
 <div class="controls">
 <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
 <asp:RequiredFieldValidator ID="rfvFirstName" runat="server" ControlToValidate="txtFirstName"
 Text="*" ErrorMessage="Provide first name"></asp:RequiredFieldValidator>
 </div>
 </div>
 <div class="itemContent">
 <label>Last name</label>
 <div class="controls">
 <asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
 <asp:RequiredFieldValidator ID="rfvLastName" runat="server" ControlToValidate="txtLastName"
 Text="*" ErrorMessage="Provide last name"></asp:RequiredFieldValidator>
 </div>
 </div>
 <div class="itemContent">
 <label></label>
 <div class="controls">
 <asp:Button ID="btnSaveInfo" runat="server" Text="Save data" />
 </div>
 </div>
 </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: