ASP.NET - Custom Validator with Dynamic ErrorMessage

Johnrad picture Johnrad · Jan 4, 2011 · Viewed 13.3k times · Source

I am currently trying to make sure a number entered in a textbox is divisibly by 1.25 or 1.5. The wayI decide weather to mod the number by 1.25 or 1.5 is dependant on what is in another drop down list. For example: If the selected index of a DDL is 1, I mod by 1.5, if it is 2 I mod by 1.25.

However I need to display to the user why the error was thrown. The error message of the custom validator needs to be something like "Number Must be devisible by 1.25" or vice versa.

From what I can tell me code should work. But it doesn't. I read on another forum that taking the source and making the innerText your error message should do the trick. But I must be doing something wrong somewhere. When I step through my javascript function it steps through perfectly. Just no error message. Here is my code:

<asp:CustomValidator ID="ValidateFinHeight" runat="server" CssClass="NormLabel" 
Display="Dynamic" 
ControlToValidate="txtFinHeight" 
ClientValidationFunction="validateFinHeight"></asp:CustomValidator>

<script type="text/javascript" language="javascript" >
function validateFinHeight(source, arguments)
{
  var ddl = document.getElementById('cboTubeDia');
  var ddlSelIndex = ddl.selectedIndex

  switch(ddlSelIndex)
  {
    case 0:
        arguments.isValid = true;
        return;     
    case 1:
        if(arguments.value%1.25 != 0)
        {
            source.innerText = "Height must be divisibly by 1.25";
            arguments.isValid = false;
            return;
        }
        else
        {
            arguments.isValid = true;
            return;
        }
    case 2:
        if(arguments.value%1.5 != 0)
        {
            source.innerText = "Height must be divisibly by 1.5";
            arguments.isValid = false;
            return;
        }
        else 
        {
            arguments.isValid = true;
            return;
        } 
  }
}
</script>

Answer

Tim Schmelter picture Tim Schmelter · Jan 4, 2011

There were several minor mistakes in your javascript functions according to case sensitivity(f.e. IsValid and Value). I have debugged it to see what property of the Error-Span i must set. It was the textContent attribute for Firefox and innerText for IE.

The working function(cross browser capable):

  function validateFinHeight(source, args) {
        var ddl = document.getElementById('cboTubeDia');
        var ddlSelIndex = ddl.selectedIndex;
        var errorMsg = "";

        switch (ddlSelIndex) {
            case 0:
                args.IsValid = true;
                return;
            case 1:
                if (args.Value % 1.25 != 0) {
                    errorMsg = "Height must be divisibly by 1.25";
                    if (source.innerText) {
                        source.innerText = errorMsg;
                    } else {
                        source.textContent = errorMsg;
                    }
                    args.IsValid = false;
                    return;
                }
                else {
                    args.IsValid = true;
                    return;
                }
            case 2:
                if (args.Value % 1.5 != 0) {
                    errorMsg = "Height must be divisibly by 1.5";
                    if (source.innerText) {
                        source.innerText = errorMsg;
                    } else {
                        source.textContent = errorMsg;
                    }
                    args.IsValid = false;
                    return;
                }
                else {
                    args.IsValid = true;
                    return;
                }
        }
    }