使用jQuery验证下拉列表

Question

So I'm using Telerik's drop down list for a number of form inputs and I'm also validating that they're not empty with jquery client side. Here's what I have - it definitely validates the control but I can't get it to add a class to an object by looking for its parent.

Jquery:

function validateCombo(source, args) {

    var combo = $find("<%= listWorkType.ClientID %>");
    var text = combo.get_text();
    if (text.length < 1) {        
        args.IsValid = false;
         combo.parents("div.selectWrap").addClass("error");
    }
    else {              
        args.IsValid = true;   
        combo.parents("div.selectWrap").removeClass("error");     
    }
}

.net

<div class="selectWrap"> <rad:RadComboBox ID="listWorkType" Width="338" runat="server" InputCssClass="dropdown"></rad:RadComboBox></div>
<asp:CustomValidator ID="RFVDesiredJob" runat="server" Display="Dynamic" CssClass="formtext" ClientValidationFunction="validateCombo" ErrorMessage="Required" ></asp:CustomValidator>

As you can see from the jquery I'm wanting to add a class of 'error' to the div that is wrapping the drop down being validated. As stated the validation works perfectly but the div .selectWrap doesn't get the class added.

I can always just reference the div by class or create an ID but I'm doing this for a number of drop downs and I'm looking for a uniform solution.

Any insight would be greatly appreciated. Thanks.

Answer 1

Looks like you're trying to use jQuery on a non jQuery object, the $find fetches you the Telerik Client Side Object, so the combo.parents(..) throws an exception. You could try something like this:

 function validateCombo(source, args) {
        var combo = $find("<%= listWorkType.ClientID %>");
        //fetch the jQuery element as well
        var jqueryComboItem = $('#' + "<%= listWorkType.ClientID %>"); 
        var text = combo.get_text();
    if (text.length < 1) {        
        args.IsValid = false;
        jqueryComboItem.parents("div.selectWrap").addClass("error");
    }
    else {              
        args.IsValid = true;
        jqueryComboItem.parents("div.selectWrap").removeClass("error");     
    }
}