Sir,
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="FORESTUSR/js/jquery.min.js"></script>
<script src="FORESTUSR/js/jquery-ui.js" type="text/javascript"></script>
<link href="FORESTUSR/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<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>
<script type="text/javascript">
function ShowPopup(message) {
$(function () {
$("#modal_button").html(message);
$("#modal_button").dialog({
title: "Message",
width: 500,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
modal: true
});
});
};
</script>
<style type="text/css">
.controlError{border:solid 1px maroon; background:red;}
</style>
</head>
<body>
<center>
<form id="form1" runat="server">
<table cellpadding="0" cellspacing="10" border="0" width="500">
<tr>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Enter textbox 1" ControlToValidate="TextBox1" Display="Dynamic" SetFocusOnError="True" ValidationGroup="Page" style="display:none !important;">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Enter textbox 2" ControlToValidate="TextBox2" Display="Dynamic" SetFocusOnError="True" ValidationGroup="Page" style="display:none !important;">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Enter textbox 3" ControlToValidate="TextBox3" Display="Dynamic" SetFocusOnError="True" ValidationGroup="Page" style="display:none !important;">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" ValidationGroup="Page" OnClientClick="OnSubmit()"/></td>
</tr>
</table>
<div id="validation_dialog" style="display: none">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" ValidationGroup="Page" />
</div>
</form>
</center>
</body>
</html>
In my above code i have used jquery modal box to display validation message on button click. I have set the default text as * to display instead of whole error message.
But know i dont want it to be disploayed. I want the on Button click only dialog box will appear with validation message, So for that i have set style property as style="display:none;" for each validation not to be displayed. But it is still displaying.
How should i avoid this?
