Disable Validator but Validator Callout still shows and causes validation - asp.net

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.

Answer 2

I had the same problem, i solved with something like this
if ((qtyEntered % incrementQty) != 0) {
ValidatorEnable(incrementValidator, true);
$("#" + validatorID + "_ValidatorCalloutExtender_popupTable").show();
alert("not valid");
return;
}
else {
ValidatorEnable(incrementValidator, false);
$("#" + validatorID + "_ValidatorCalloutExtender_popupTable").hide();
alert("valid");
return;
}
Hope this helps someone.