Michel
Michel

Reputation: 23615

Style the VALIDATED control when using .net validation controls

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

Upvotes: 0

Views: 996

Answers (1)

James Johnson
James Johnson

Reputation: 46047

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" }); 
    }
});

Upvotes: 1

Related Questions