Sir,
- I have two textbox's on a form. One for Date and another for name.
- For date textbox i have used CalendarExtender control and MaskedEditExtender control.
- I have required field validator for both textbox's.
- Also used JQuery Modal Popup to display validation error message.
- When i click on submit button it catch the required field message of name textbox not for Date Textbox.
below is my html code:
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@ Register assembly="System.Web.Ajax" namespace="System.Web.UI" tagprefix="asp" %>
<%@ Register assembly="MSCaptcha" namespace="MSCaptcha" tagprefix="cc1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Sample</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" />
<style type="text/css">
.controlError{color:Black;border:solid 1px red;}
*:focus{outline:none;}
</style>
<script type="text/javascript">
function OnSubmit() {
if (typeof (OnSubmit) == "function" && Page_ClientValidate() == false) {
for (var i in Page_Validators) {
try {
var control = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
control.className = "controlError";
}
else {
control.className = "";
}
}
catch (e) { }
}
$("#validation_dialog").dialog({
title: "Validation Error!",
modal: true,
resizable: false,
height: 300,
width: 400,
buttons: {
Close: function () {
$(this).dialog('close');
}
}
});
return false;
}
return true;
}
</script>
</head>
<body>
<center>
<form id="form1" runat="server" autocomplete="off">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></cc1:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
Date: <asp:TextBox ID="dateTextBox" runat="server" Width="75px" MaxLength="10"></asp:TextBox>
<asp:ImageButton ID="imgPopup" runat="server" ImageAlign="Bottom"
ImageUrl="images/cal.gif" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator26" runat="server"
ControlToValidate="dateTextBox" Display="Dynamic"
ErrorMessage="Enter date of issue." Font-Size="9pt" SetFocusOnError="True"
Text="*" ValidationGroup="Page"></asp:RequiredFieldValidator>
<cc1:CalendarExtender ID="Calendar1" runat="server" Format="dd/MM/yyyy"
PopupButtonID="imgPopup" TargetControlID="dateTextBox">
</cc1:CalendarExtender>
<cc1:MaskedEditExtender ID="MaskedEditExtender1" runat="server" CultureAMPMPlaceholder=""
CultureCurrencySymbolPlaceholder="" CultureDateFormat="" CultureDatePlaceholder=""
CultureDecimalPlaceholder="" CultureThousandsPlaceholder="" CultureTimePlaceholder=""
Enabled="True" ClearMaskOnLostFocus="false" TargetControlID="dateTextBox"
Mask="99/99/9999" MessageValidatorTip="true" OnFocusCssClass="MaskedEditFocus"
OnInvalidCssClass="MaskedEditError" CultureName="en-CA" /><br /><br />
Name: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator27" runat="server"
ControlToValidate="TextBox1" Display="Dynamic"
ErrorMessage="Enter name." Font-Size="9pt" SetFocusOnError="True"
Text="*" ValidationGroup="Page"></asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" ValidationGroup="Page" OnClientClick="OnSubmit()" />
</ContentTemplate>
</asp:UpdatePanel>
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Page" />
</div>
</form>
</center>
</body>
</html>
