Question

i’m using .net validation controls, and i’m able to style the error text that is placed besides the control that gets validated (in our case, we display a red asterisk).

So i can style the red asterisk, but in this case i also want to style the textbox / input where the error is in.

Can is somehow accomplish this with the standard validation controls?

Basicly what i want is to ‘ask’ all validators for their validated control and style that control (ie apply a css class to it).

michel

Answer 1

You should be able to do this with a CustomValidator. Here’s a simple example:

<script type="text/javascript">
    validateStuff = function(sender, args){
        args.IsValid = false; //your validaiton logic
        if (!args.IsValid){
            var el = document.getElementById(sender.controltovalidate);
            if (el){
                el.style.border = "1px solid red";
            }
        }            
    }
</script>
<asp:TextBox ID="TextBox1" runat="server" />
<asp:CustomValidator runat="server" id="CustomValidator1"
        ControlToValidate="TextBox1"
        ClientValidateFunction="validateStuff"
        ErrorMessage="Invalid Prime Number">
</asp:CustomValidator>

You could also use the jQuery Validation Plugin. I haven’t tested this, but here’s an example of how you can hightlight the element:

$("#<%=form1.ClientID%>").validate({
    rules: { 
        <%= TextBox1.ClientID %> : {
            required: true                
        }
    },    
    highlight: function(element, errorClass) {         
        $(element).css({ border: "1px solid red", color : "red" }); 
    }
});