Client-side CustomValidator - overcomplicating things

on

One more time using WebForms I was struggling because of overcomplicated things.

I just needed to validate client-side using CustomValidator. So what's a problem? There is a ClientValidationFunction that does exactly this.

The most important problem with this approach: it's impossible to set ControlToValidate property to controls that don't have values (there're plenty of them). It just gives a runtime error.

I could of course write another server control and it would be the best option. But I was lazzy for that and didn't feel it's good to write it for simple things.

So I have the problem in my ClientValidationFunction: It doesn't receive any data except value (that is not available). So I decided to extend this approach and make the validation function to look like this:

function ValidateAgreement(src, args, extParam)
{
if (extParam) {
    args.IsValid = extParam.checked;
}
}

This is just a simple example but shows the idea. We can pass any data via extParam in our validator. So how is it used? Of course we need to get this parameter somewhere.

So the server's code looks like this:

<asp:CustomValidator id="AgreementValidator" runat="server"
Display="Dynamic"
ClientValidationFunction='<%# string.Format("CVH.createFunction(ValidateAgreement, {0})", Agreement.ClientID) %>' />

What's happening there? ClientValidationFunction is assigned a method created by CVH.createFunction JavaScript.

What's CVH.createFunction? Here it is: 

// CVH=CustomValidatorHelper
var CVH={
createFunction: function(validationFunction, extParamData) {
    var originalFunction = validationFunction;
    var extParam = extParamData;

    return function(src, args) {
        // Proxy the call...
        return originalFunction(src, args, extParam);
    }
}
}
var CustomValidatorHelper=CVH;
So this just creates a function that becomes a proxy between CustomValidator internals and the actual validation function. This allows to pass more parameters to the validation function.

Other possible usage. Just don't allow user to submit form if some content is not visible (for example, license agreement has not ben read).

<asp:CustomValidator id="AgreementScrolledDivValidator" runat="server"
ClientValidationFunction="CVH.createFunction(VisibleDivValidator, 'contentDiv')" />
function VisibleDivValidator(src, args, extParam) {
args.IsValid = (!!extParam && document.getElementById(extParam).style.display == 'block');
}

I don't need anymore to create server controls to validate on the client. And I like this.

It's a power of JavaScript.

But all the validation stuff is a bit ugly with WebForms. I wish it could use some JS validation framework... Like fValidate, Validation jQuery Plugin.