How to change the Background of control if Validation failed

Tripati_tutu
Posted by in ASP.NET category on for Beginner level | Points: 250 | Views : 12379 red flag

In this article I will show you how to change the background and border color for controls that failed the validation in an ASP.Net application.


 Download source code for How to change the Background of control if Validation failed

Introduction



To achieve the above requirement, here I have created a stylesheet, a javascript function, and have used a validation control named as RequiredFieldValidator.

Now I will explain step by step to do this. Here I have done all stylesheet code and javascript codes in a single page that is in source code section of a webpage.

Step - 1: 


First of all we have to create a cascading stylesheet for the above border and background color change.

Code for CSS:
<style type="text/css">
        body
        {
            font-family: Verdana;
            font-size: 12pt;
        }
        .ErrorCtrl
        {
            background-color: green;
            border: solid 1px Red;
        }
    </style>

Step - 2: 


Now the task is to create a javascript function. For this we have to declare a JavaScript function called “WebForm_OnSubmit” which comes as out of the box with ASP.NET.

Code:
<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 = "ErrorCtrl";
                    }
                    else 
                    {
                        control.className = "";
                    }
                } 

                catch (e) { }
            }
            return false;
        }
        return true;
    }
</script>

Step - 3: 


Now just create a new web application. Write the below code in Default.aspx page. The below code includes the above mentioned CSS code and Javascript code.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head" runat="server">
    <title></title>

    <style type="text/css">
        body
        {
            font-family: Verdana;
            font-size: 12pt;
        }
        .ErrorCtrl
        {
            background-color: green;
            border: solid 1px Red;
        }
    </style>

</head>
<body>
    <form id="FormControl" runat="server">
    <div>
        <asp:FileUpload ID="fu1" runat="server" />
        <asp:RequiredFieldValidator ID="rfv1" runat="server" ControlToValidate="fu1" ErrorMessage="must have to upload">
        </asp:RequiredFieldValidator>
        <br /><br />
        UserName:
        <asp:TextBox ID="txtUname" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="rfv2" runat="server" ControlToValidate="txtUname" ErrorMessage="Shouldn't Blank">
        </asp:RequiredFieldValidator>
        <br /><br />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
    </div>
</form>

<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 = "ErrorCtrl";
                    }
                    else 
                    {
                        control.className = "";
                    }
                }

                catch (e) { }
            }
            return false;
        }
        return true;
    }
</script>
</body>
</html>
In the above code snippet, I have kept one TextBox, one File Upload controller, two RequiredFieldValidators. One is validating File Upload controller and another one using for text box control.

Now save the above code and then press f5 key to see how it is working. Your page should look something like below image.



After getting this window, Do not upload any file, and do not supply any value in the textbox and try to click Submit button. You should be seeing below image that appears because of the validation function we wrote above.



Conclusion


As you can see that by catching the WebForm_OnSubmit function we can customize the behavior of the validation controls. Thanks !

Page copy protected against web site content infringement by Copyscape

About the Author

Tripati_tutu
Full Name: K.Tripati Balaji Subudhi
Member Level: Bronze
Member Status: Member
Member Since: 9/20/2010 5:58:39 AM
Country: India

http://www.dotnetfunda.com/profile/Tripati_tutu.aspx

Login to vote for this post.

Comments or Responses

Posted by: Kamlesh420 on: 12/10/2011 | Points: 25
good work

Login to post response

Comment using Facebook(Author doesn't get notification)