ASP.NET Change Control Style When Validation Fails
CSS Style:
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.ErrorControl
{
// Put control style here which you want after validation fails
background-color: #FBE3E4;
border: solid 1px Red;
}
</style>
Java Script:
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
for (var i in Page_Validators) {
try {
var control = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
control.className = "ErrorControl";
} else {
control.className = "";
}
} catch (e) { }
}
return false;
}
return true;
}
</script>
HTML or .ascx:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Please Enter Valid Email" ControlToValidate="TextBox2"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
</div>
</form>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
.ErrorControl
{
// Put control style here which you want after validation fails
background-color: #FBE3E4;
border: solid 1px Red;
}
</style>
Java Script:
<script type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
for (var i in Page_Validators) {
try {
var control = document.getElementById(Page_Validators[i].controltovalidate);
if (!Page_Validators[i].isvalid) {
control.className = "ErrorControl";
} else {
control.className = "";
}
} catch (e) { }
}
return false;
}
return true;
}
</script>
HTML or .ascx:
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>
<br />
<br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ErrorMessage="Please Enter Valid Email" ControlToValidate="TextBox2"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">
</asp:RegularExpressionValidator>
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
</div>
</form>
Comments
Post a Comment