Disable Validator but Validator Callout still shows and causes validation

Question

I'm trying to validate that a certain increment of a product was entered in the product qty textbox that is in a repeater. The problem is that the increment is different for every product, so I need that as a variable for each call to validate it (which I don't think you can do with a custom validator), and I need it client side with a ValidatorCalloutExtender. The best solution i have come up with is to trigger a RegEx validator that will evaluate false via my own javascript (another validator takes care of making sure its a valid number). The problem is that with the ValidatorCalloutExtender, when I disable the validator it still marks it as invalid (the textbox flashes white then turns yellow again (meaning its invalid), even though I placed JavaScript alerts and I know the validator is getting disabled. Anyone have any ideas as to whats going on here? Here is the code. Thanks!

PS: Everything works fine w/out the validatorCalloutExtender, but I really need the Callout Extender!

The validators:

<asp:RegularExpressionValidator ID="ProductIncrementValidator" runat="server"
  ControlToValidate="ProductQtyTxt"
  ErrorMessage="Please enter a valid increment"
  ValidationExpression="^triggerthisvalidation$"
  Enabled="false"
  Display="Dynamic"
  SetFocusOnError="true"
  ValidationGroup="productValidation">
</asp:RegularExpressionValidator>

<ajax:ValidatorCalloutExtender ID="ProductIncrementVE" runat="server"
  TargetControlID="ProductIncrementValidator"
  HighlightCssClass="validator"
  WarningIconImageUrl="~/img/blank.gif">
</ajax:ValidatorCalloutExtender>

When Databinding the product:

Dim productQtyTxt As TextBox
productQtyTxt = CType(e.Item.FindControl("ProductQtyTxt"), TextBox)

Dim incrementValidator As RegularExpressionValidator
incrementValidator = CType(e.Item.FindControl("ProductIncrementValidator"), RegularExpressionValidator)
incrementValidator.ErrorMessage = "Please enter an increment of " & product.OrderIncrement.ToString()


' Add item qty increment check
productQtyTxt.Attributes.Add("onChange", "javascript:checkIncrement('" _
  & productQtyTxt.ClientID & "', " _
  & product.OrderIncrement & ", '" _
  & incrementValidator.ClientID & "')")

The Javascript:

    function checkIncrement(textboxID, incrementQty, validatorID) {
    var textbox = $get(textboxID);
    var incrementValidator = $get(validatorID);
    var qtyEntered = textbox.value;

    if ((qtyEntered % incrementQty) != 0) {
        ValidatorEnable(incrementValidator, true);
        alert("not valid");
        return;
    }
    else {
        ValidatorEnable(incrementValidator, false);
        alert("valid");
        return;
    }
}

Answer 1

1.Set CSS class for ValidatorCalloutExtender:

<style id = "style1" type="text/css">
        .CustomValidator
        {
            position: relative;
            margin-left: -80px;
            margin-top: 8px;
            display: inherit;
        }
</style>

<ajax:ValidatorCalloutExtender ID="ProductIncrementVE" runat="server"
  TargetControlID="ProductIncrementValidator"
  HighlightCssClass="validator"
  WarningIconImageUrl="~/img/blank.gif" 
  CssClass="CustomValidator">
</ajax:ValidatorCalloutExtender>

2 . Use JavaScript to alter this CSS class when needed. Set display = none:

function alterDisplay(type) {
    var styleSheet, cssRule;
    if (document.styleSheets) {
        styleSheet = document.styleSheets[index1];
        if (styleSheet) {
            if (styleSheet.cssRules)
                cssRule = styleSheet.cssRules[index2]; // Firefox
            else if (styleSheet.rules)
                cssRule = styleSheet.rules[index2];         // IE
            if (cssRule) {
                cssRule.style.display = type;
            }

        }
    }
}

Note: the index1 and index2 may be difference from pages, it's up to your declaration. You can use IE debugger to find our the correctly indexs.