Question about custom client-side validation

[Mark Kucera]

I have a situation where i'd like to create custom validation for a combobox, but i'm at a loss as to how to write the client validation logic.  I'm basically looking to create the equivalent of a requiredfieldvalidator, but instead of showing an error message somewhere on the page, i would like to modify the appearance of the combox itself using CSS.  i have this working via server side validation by doing the following:

Anytime i want to validate a combobox i place something like this on my page

<asp:Label ID="lblError1" runat="server" Visible="false">
<style type="text/css">
    #<%=rcbFolders.UniqueID.Replace("$","_")%>.RadComboBox_test table {
    background-color: RED;
}

#<%=rcbFolders.UniqueID.Replace("$","_")%>.RadComboBox_test .rcbInputCell, #<%=rcbFolders.UniqueID.Replace("$","_")%>.RadComboBox_test .rcbArrowCell {
    background-color: red;
}
</style>
</asp:Label>

and on the server side i check to see if any items are selected and if not i change the label to visible.

This works because of the fact that the styles are declared inline in the page and take precedence over styles declared in my skin stylesheets at the top of the page.  Including the uniqueid in the css assures me that the css for just the control that i'm validating is updated. 

This solution is ok, it is effective, but it's kind of awkward, especially on pages that have other requiredfieldvalidators that include client side validation. The user receives visual feedback immediately for the other client-side validated fields, but they have to wait till all those checks pass and the postback to the server is made before they can get the visual feedback on the combobox selection. I think i could hack my way into using a custom validator to validate the combobox selection on the client, but i'm not sure how to go about achieving the actual "notification" that we're after by updating the color of the control on error.

Any ideas about how this could be accomplished?

Thanks!
-Mark

[Shinu]

Hi Mark Kucera,

Please have a look into the following code snippet for Client Side Validation of RadComboBox.

ASPX:

<telerik:RadComboBox ID="RadComboBox2" runat="server" DataSourceID="SqlDataSource1"
    DataValueField="id" EmptyMessage="Select" DataTextField="text" AutoPostBack="true">
</telerik:RadComboBox>
<asp:CustomValidator ID="CustomValidator2" ValidateEmptyText="true" runat="server"
    ClientValidationFunction="Validate" EnableClientScript="true" ControlToValidate="RadComboBox2" />
<br />
<br />
<telerik:RadButton ID="RadButton2" runat="server" Text="Submit" CausesValidation="true"
    AutoPostBack="false">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function Validate() {
        var combo = $find("<%=RadComboBox2.ClientID%>");
        combo.addCssClass("ErrorMsg");
    }
</script>

CSS:

<style type="text/css">
    .ErrorMsg
    {
        border: 2px solid red !important;
    }
</style>

Hope this will helps you.
Thanks,
Shinu.

[Mark Kucera]

WOW!!

Not only do i think this is going to work perfectly, but it's also easier to implement than i was expecting!  The .addCssClass() is exactly what i was looking for.  I scoured through the online documentation but wasn't able to find any reference to any methods or properties that dealt with the control's css.

The only real change that i made was to the validation function.  Since this will often be used in a webcontrol that could be included multiple times on the page i made some minor edits to solve the issue of having the client-side validation function written to the browser multiple times w/ the same name.  Here is the validation function that I'm most likely going to use:

<script type="text/javascript">
function ValidateListPicker<%=RadComboBox1.UniqueID.Replace("$","_")%>(sender, args) {
    var combo = $find("<%=RadComboBox1.UniqueID.Replace("$","_")%>");

    //do the validation here
    var text = combo.get_text();
    if (text == "" || text == "<%=RadComboBox1.EmptyMessage%>")
    {
        combo.addCssClass("ValidateListPicker");
        args.IsValid = false;
    }
    else
    {
        args.IsValid = true;
    }

}
</script>

The CSS class is simply:

<style type="text/css">
.ValidateListPicker
{
    border: 2px solid red !important;
    border-radius:6px;
}
</style>

And since my client-side function has a dynamic name, this name has to be set dynamically as well which is no problem.

protected void Page_Load(object sender, EventArgs e)
{
    CustomValidator2.ClientValidationFunction = "ValidateListPicker" + RadComboBox1.UniqueID.Replace("$", "_");
}

Thanks so much!
-Mark