Advanced Dotnet Tutorial: How to change the Background of control if Validation failed

Created a stylesheet, a javascript function, and have used a validation control named as RequiredFieldValidator.

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, 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.