Dynamically change ajax toolkit ValidatorCalloutExtender

Question

Hey everyone,

I'm using the ajax toolkit's ValidatorCalloutExtender to display error messages on a textbox. The ValidatorCalloutExtender is extending on a RegularExpressionValidator that is validating the textbox. The problem I am having is that I need to dynamically change the ValidationExpression and ErrorMessage depending on what dropdownlist item has been selected that is associated to the textbox. I was able to successfully do this using client side events and javascript but then I can't seem to get the ValidatorCalloutExtender to update the ErrorMessage that is displayed properly. The thing that confuses me more is this works fine in Firefox but I can't seem to get it to work in any version of IE. If anyone can help me find a way to get my error message that is displayed to change dynamically it would be greatly appreciated.

Answer 1

Ok everyone,

I figured out my own issue and thought I might put my findings out here if others are trying to do something similar to me.

In javascript I'm passing the object of the regularexpressionvalidator tied to a textbox, into a function that will change the regular expression and error message depending on a value in a drop down list. If a user changed the dropdownlist value I wanted the validator and ajax validatorcallout to update immediately and either tell the user that the value in the textbox was now valid or it was invalid but because of this new reason. I'm not saying this is the best way to do this but this is the way that works for me and I wanted to do it on the client.

below is the code that i'm using and (val) is the regularexpressionvalidator object that is passed in.

function setSearchRegEx(val)
{
    var regExpression = "";
    var valMessage = "Must be in the following format: ";
    var message = "";

    // set regex information depending on what drop down value they select.
    switch (document.getElementByID('ddlValue1.ClientID').value) {
        case "Value1":
            regExpression = "^[a-zA-Z0-9'*\s-]{1,75}$";
            message = valMessage + "[A-Z][0-9]'. #-";
            break;
        case "Value2":
            regExpression = "^\[0-9]{3}-\[0-9]{2}-\[0-9]{4}|\d{9}$";
            message = valMessage + "999-99-9999";
            break;
        case "Value3":
            regExpression = "[a-zA-Z0-9'*\s-]{1,50}$";
            message = valMessage + "[A-Z][0-9]'. #-";
            break;
        case "Valu4":
            regExpression = "^\[0-9]{3}-\[0-9]{3}-\[0-9]{4}$";
            message = valMessage + "999-999-9999";
            break;
        case "Value5":
            regExpression = "^[0-9]{1,10}$";
            message = valMessage + "9999999999";
            break;
        default:
            regExpression = "";
            message = "";
    }
    // set validation control values for the new drop down selected.
    val.validationexpression = regExpression;
    val.errormessage = message;
    val.title = message;

    // fire the validation function to validate what is currently in the textbox
    val.isvalid = val.evaluationfunction(val);
    //call the function to manipulate the UI
    validatorUpdateDisplay(val);
}

function validatorUpdateDisplay(val)
{
    if (val.isvalid) {

        //make the error invisible
        val.display = "none";
    }
    else {

        var browser = navigator.appName;

        //different browsers get updated differently, IE really the only main one to update differently.
        if (browser == "Microsoft Internet Explorer") {
            val.ValidatorCalloutBehavior._errorMessageCell.innerText = val.errormessage;
        }
        else {
            val.ValidatorCalloutBehavior._errorMessageCell.textContent = val.errormessage;
        }

        //make the error visible
        val.display = "inline";
    }          
}

As you can see Internet Explorer didn't work the same way as the rest of the browsers I tested against did! If someone has a better way of doing this please share, and I hope this answer helps some people out!

Thanks