ASP - NET - 2 - CustomValidator - Javascript - Custom msg not show

[Richard]

Hi,

On an ASP.NET 2 there's a CustomValidator with EnableClientScript="true" and
the ClientValidationFunction set to a Javascript function shown below. The
validator has no ControlToValidate b/c inside the function several controls,
and not just one need to be validated.

The need is to have a validation control that fires, and sets the IsValid
appropriately on the page, and allows the displayed message to be set by code
in the client (Javascript). What we don't want is to have multiple validation
controls on the page just to perform simple validation.

The Javascript function that handles the ClientValidationFunction property
of the customvalidator is:

function CustValMyForm(source, arguments)
{
arguments.IsValid = ValMyForm(); // This function performs the
actual validation.
return;
}

function ValMyForm()
{
var txtFileCode =
document.getElementById("<%=txtFileCode.ClientId %>");
var cvError = document.getElementById("<%=cvErrorRen.ClientId
%>");

var sFileCode = Trim(txtFileCode.value);

if (sFileCode.length < 1)
{
cvError.InnerText = "Please enter a value.";
txtFileCode.focus();
return false;
}

if (IsNotNumeric(sFileCode))
{
cvError.InnerText = "Value must be numeric.";
txtFileCode.focus();
return false;
}

// Code continues...other controls are validated, etc...

return true;
}

The CustomValidator does fire, and it calls the functions in Javascript, but
whatever value is set in the Text property of the CustomValidator on the page
at design time, is displayed when an invalid value is detected by the
validation. The Javascript code somehow fails to change the message according
to the error.
The following variations have been tested, and the result is the same:
a) Using InnerText: cvError.InnerText = "Value must be
numeric.";
b) Using InnerHTML: cvError.InnerHTML = "Value must be
numeric.";
c) Using sender.errormessage: sender.errormessage = "Value must be
numeric.";

This is how the custom validator gets rendered on the resulting webpage:

<span id="ctl00_cphMyMaster_cvError"
style="display:inline-block;color:Red;width:160px;visibility:hidden;"></span>

And there's no way to change the "visibility:hidden" part of the style
attribute either from the Javascript function or by setting it on the
CustomValidator at design time.
This is a simple validation... why does it have to be such a headache!?

Your help will be greatly appreciated.

Thanks in advance,

Richard

 

[Scott M.]

AFAIK each validator control MUST have its ControlToValidate property set.

 

[theacadian]

Though this is an old post, this seemed like a good idea, so I played around with the code to get some practice.

SOLUTION 1:

I think you could just achieve what you were trying to do by -

0. Not using any Validation controls at all. Place a DIV instead of a CustomValidator

1. specifying an empty DIV - <div id="errDiv"><div>

2. specify OnClientClick="return ValidateForm();" for the Submit button
(Note that "return" is important here. The function should return False to prevent the button from doing a postback)

3. In the ValidateForm() javascript function - show error messages using innerHTML property of errDiv

 e.g.
<asp:TextBox ID="txtStartDate" runat="server" ></asp:TextBox>
<asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
           CausesValidation="true" onclick="btnSubmit_Click" 
               OnClientClick="[B]return [/B][B]ValidateForm[/B]();" />
<div id="errDiv">
</div>

function [B]ValidateForm[/B]() {
             [B]var errorDiv = document.getElementById("errDiv");[/B]

             var startDate =document.getElementById('txtStartDate').value;
             var endDate = document.getElementById('txtEndDate').value;
             
             var isValid = true;
             var errorMessage = '<ol>';
             
             if (!isValidDate(startDate)) {
                 errorMessage=errorMessage + '<li>StartDate invalid</li>';
                 isValid = false;
             }
             if (!isValidDate(endDate)) {
                 errorMessage=errorMessage + '<li>EndDate invalid</li>';
                 isValid = false;
             }
             
             errorMessage = errorMessage + '</ol>';
             [B]errorDiv.innerHTML = errorMessage;[/B]

             return isValid;
         }

SOLUTION 2:
I used jquery to achieve the manipulation of the error message in CustomValidator's span tag. That solution is below.

For a CustomValidator, it is not mandatory to specify ControlToValidate property - http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.customvalidator.aspx

<asp:TextBox ID="txtStartDate" runat="server" ></asp:TextBox>
<asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>

<asp:CustomValidator ID="[B]custom[/B]" runat="server"  
     ClientValidationFunction="[B]ValidateForm[/B]">
</asp:CustomValidator>

function [B]ValidateForm[/B](source, args) {
             //clear error message list by removing <ol> tag
             $("[id$=[B]custom[/B]] ol").remove();

             //recreate <ol> tag
             $("[id$=[B]custom[/B]]").append('<ol>');

             args.IsValid = true;

             // start adding error messages as <li> tags

             if (!isValidDate($("#txtStartDate").val())) {
                 $("[id$=[B]custom[/B]] ol").append('<li>StartDate invalid</li>');
                 args.IsValid = false;
             }
             if (!isValidDate($("#txtEndDate").val())) {
                 $("[id$=[B]custom[/B]] ol").append('<li>EndDate invalid</li>');
                 args.IsValid = false;
             }
             $("[id$=[B]custom[/B]] ol").append('</ol>');
             return args.IsValid;
         }

In the above example, a CustomValidator is used to validate 2 TextBox controls and show error messages in a <ol> .

From your code, it is apparent that the CustomValidator is getting rendered as a <span> tag. So the <ol> alongwith the <li> are put into that span tag using the above jquery code..

I used jquery to make the javascript coding easier for me. But I realized I do not know how to make it work without jquery. I tried your javascript code and as you mentioned, it was not having any effect on the <span> tag.. This is probably an example why jquery seems so useful.

$("[id$=custom]") - I think this selects the element whose ID ends with "custom".. (I am not sure about how it works)

isValidDate() is a javascript function that I wrote for my purposes.

$("#txtStartDate").val() - jquery selector to select textbox and gets its value

Hope this helps..