Thursday, August 12, 2010

How to show validation summary in a dialogue box (not alert box) using jQuery

Please register a script to wrap the validation summary div with suitable wrapper element and then call to show dialogue. Use page clientscript register start up script to register the script if validation fails in the code behind.


Example:
<%@ Page Language="C#" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head2" runat="server">
    <link href="Scripts/ui/css/jquery.ui.all.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/ui/jquery-ui-1.8.4.min.js" type="text/javascript"></script>
    <script runat="server">
        private string script = @"
            $(document).ready(function () {
                $("".ValidationSummary"").wrap(""<div class='dialogue'></div>"");
                $("".dialogue"").dialog();
            });
        ";
        protected void ValidateDateOfBirth(object sender, ServerValidateEventArgs e)
        {
            DateTime dob;
            e.IsValid = DateTime.TryParse(this.txtDob.Text, out dob);
        }
        protected void Save(object sender, EventArgs e)
        {
            this.Page.Validate();
            if (this.IsValid)
            {
 
            }
            else
                this.ClientScript.RegisterStartupScript(this.GetType(), 
                    this.GetType().Name, this.script, true);
        }
    </script>
</head>
<body>
    <form id="form2" runat="server">    
        <asp:ValidationSummary runat="server" ID="ValidationSummary" CssClass="ValidationSummary" />
        <asp:TextBox runat="server" ID="txtName" />
        <asp:RequiredFieldValidator runat="server" ID="rvalName" 
            ControlToValidate="txtName" ErrorMessage="Please enter a name" Display="None" />
        <asp:TextBox runat="server" ID="txtDob" />
        <asp:CustomValidator runat="server" ID="cvalDob" 
            OnServerValidate="ValidateDateOfBirth" ErrorMessage="Invalid date of birth" />
        <asp:Button runat="server" ID="btnSave" Text="Save" OnClick="Save" />
    </form>
</body>
</html>

No comments:

iPhone Launch Screen Sizes

iPhone Portrait iOS 8 Retina HT 5.5 = 1242 X 2208 Retna HD 4.7 = 750 X 1134 iPhone Landscape iOS 8 Retina HD 5.5  2208 X 1242 iPho...