[RESOLVED]Client side validation doesnt work

I am trying to validate a control on the client side and change the background of the control. Why is not working

Thank you

<td><asp:TextBox ID="txtName" runat="server" Width="100px"></asp:TextBox>
                            <asp:CustomValidator ID="CustomValidator1" runat="server" 
                                ErrorMessage="*" ValidateEmptyText="True" SetFocusOnError="True" ControlToValidate="txtName" 
                                ClientValidationFunction="inputValidation"></asp:CustomValidator>
                        </td>
<script type ="text/javascript" src="JavaScript/jquery-1.3.2.min.js">

    function inputValidation(source, args)
    {
        if(args.Value == "")
        {
            source.className = "errorControl";
        }
        else
        {
            source.className = "";
        }
    }


    </script>

Hi,

Try following

It seems that your logic in javascript function is not working. 

refer updated code

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .errorControl {
            background-color: Red;
        }
    </style>
    <script type="text/javascript">
        function inputValidation(source, args) {
            if (args.Value == "") {
                document.getElementById(source.controltovalidate).className = 'errorControl';
            }
            else {
                document.getElementById(source.controltovalidate).className = '';
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:TextBox ID="txtName" runat="server" Width="100px"></asp:TextBox>
            <asp:CustomValidator ID="CustomValidator1" runat="server"
                ErrorMessage="*" ValidateEmptyText="True" SetFocusOnError="True" ControlToValidate="txtName"
                ClientValidationFunction="inputValidation"></asp:CustomValidator>
        </div>
    </form>
</body>
</html>

Regards, Ajay

You need to find the reference of your control first using the source parameter like given below and then change the color of textbox as per your design.

<style>
        .errorControl
        {
            background-color: Red;
        }
    </style>
    <script type="text/javascript">

        function inputValidation(source, args) {
        //Get reference to your control here first
            var ctrl = document.getElementById(source.controltovalidate);
            if (args.Value == "") {
                //source.className = "errorControl";
                if (ctrl) {
                    ctrl.style.background = '#FFAAAA';
                }
            }
            else {
                if (ctrl) {
                    ctrl.style.backgroundColor = '';
                }
                //source.className = "";
            }
        }
    </script>
    <asp:TextBox ID="txtName" runat="server" Width="100px"></asp:TextBox>
    <asp:CustomValidator ID="CustomValidator2" runat="server" ErrorMessage="*" ValidateEmptyText="True"
        SetFocusOnError="True" ControlToValidate="txtName" ClientValidationFunction="inputValidation"></asp:CustomValidator>

Leave a Reply