How to apply style on input control when validator is active?
Answer:
ASP.net validation control client side API does not provide any after validation event. So, we can not catch the validation process happens before postback. Due to this, we can not hook any client side function before postback and after validation. If we want we can create our own function do call validation and postback functions but to do so you need to customize client side click event for Button control.
In a small research I discovered a tricky technique to add a style or css to control when validation fails.
Take a look:
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.error{ border:1px solid #FB0E0E;}
</style>
<script src="js/jquery.1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#form1").bind("submit", function (event) {
var i = 0;
for (i = 0; i < Page_Validators.length; i++) {
if (Page_Validators[i].isvalid == false) {
$('#' + Page_Validators[i].controltovalidate).addClass('error');
} else {
$('#' + Page_Validators[i].controltovalidate).removeClass('error');
}
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
Enter Name: <br />
<asp:TextBox ID="txtName" runat="server"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtName" ErrorMessage="Name is required" Display="None"></asp:RequiredFieldValidator>
Enter City:<br />
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox><br />
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtCity" ErrorMessage="City is required" Display="None"></asp:RequiredFieldValidator>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</form>
</body>
</html>
In above code, JQuery is required. You may achieve logic without using it but I love JQuery as it reduces code.
The logic is as you can guess, simply bind form submit event (fortunately, when submit is bound using jquery, it calls after validation and before postback). Then traverse through all the validators, check whether validation fails and apply css. As simple as that...
Why we need this?
In many cases it becomes self explanatory when validation fails and control is styled by Red border or light Red background. Unfortunately, asp.net does not support this feature. So, such workout is required.
Hope this saves you hours of head scratches.
Happy coding....
No comments:
Post a Comment