control names in a custom validator .NET Client Side Validation

Question

Hi

I have a gridview with three columns of textboxes. It can have as many rows as necessary but its usually only about 5 rows. Each row needs to be validated.

I want to create a client side validator that sums 2 of the columns together and compares it with the third column to check that the user has entered the data correctly.

Just in case you are wondering, it's part of the spec that the operator must enter the third column rather than simply summing the two previous columns together in the code behind. This is done to ensure the operator is transcribing the information correctly.

I am trying to use the custom validator in .net to create this client side validation. but I can't find a way to pass to it the names of the three text boxes. I can give it the target controls name using the ControlToValidate parameter, but how do I pass in the other two control id's ?

I am looking for the 'proper' way to do this, one thought is to create an array in javascript referenced by the controltovalidate's name.

DC

Answer 1

I solved the problem. not an elegant solution but it works.

first I placed the code into a div on the page

<div align="right"><asp:CustomValidator ID="RowValidator" runat="server"
ErrorMessage="Total of #total# does not equal 1st Preference + Ticket"
ControlToValidate="Total" ValidateEmptyText="True" 
ClientValidationFunction="CheckRow" SetFocusOnError="True" EnableClientScript="True"
enableViewState="False" Display="Dynamic"></asp:CustomValidator></div>

Then I created a JavaScript function...

function CheckRow(sender,args) {
// get the name of the control to validate
try {
    args.IsValid = true;
    ctv = sender.controltovalidate;

// get the data from the other controls
    nt = document.getElementById(ctv.replace('_Total','_NonTicket'));
    t = document.getElementById(ctv.replace('_Total','_Ticket'));

    if (nt && t) {
        v1 = Number(nt.value);
        v2 = Number(t.value);
        v3 = Number(args.Value);
        if ((v1 + v2) != v3){
            msg = GetMessage(sender);
            sender.innerHTML = msg.replace("#total#",Number(args.Value));
            args.IsValid = false;
            return false;
        }
   }
}
catch (e) {
    // something wrong default to server side validation
}
return true;
}

This is called by the custom validator for each row I use the controltovalidate parameter of the sender to get the name

then its a matter of a bit of string manipulation to get the names of the other fields.

Once retrieved you can do what you like, in my case I add and compare. if there is an error the Isvalid flag is cleared and the message is modified to suit.

The getmessage function is required because I alter the message to give a more meaningful error message

/*
get the error message from the validator
store it so it can be retrieved again
this is done because the message is altered
*/
function GetMessage(sender){        

msg = window[sender.id+"_msg"];
if (!msg){
    msg = sender.innerHTML;
    window[sender.id+"_msg"] = msg;
}
return msg;
}

The getmessage function keeps a copy of the original message so if the user makes a mistake more than once the message can be retrieved in its pristine form, other wise the first time we edit a message we overwrite the placeholder (#total#).

DC