As a .net developer, I have often thought of creating custom validators that would do just what I wanted. Unfortunately, after searching and googling, I can't find any decent article that can guide people like me specifically in direction to how to create a custom .net validator that abides the validation architecture in .Net framework (Maybe there is, but i wasn't able to find it). So, i decided to dig a little deeper to find out how it actually works both on server and on client side. The purpose of this article will be the first of few to give you a bird's eye view of .net framework's validation architecture. Let's get to the point. How do we create our own validator? In order to answer this question, we will need to firstly look at how a validator functions in .net framework by studying its server control and client scripts that perform validations.
Server Side Control
BaseValidator is the base class from which all standard .net validators derived. There are few key methods and property accessors that are necessary to plug in your own validator into .net validation framework:
Properties:
- ControlToValidate: contains the id of the control with which to validate against. The control can also be of HtmlGenericControl such as Div or Span (This part will be discussed further in Part Two in relation to multiple controls to validate).
- ErrorMessage: The error message to be displayed when invalid.
Methods:
- AddAtttibutesToRender: This is where the validator registration takes place. Certain Properties of Validator control are associated with the properties of DOM Element which represents the span html element that the validator control are rendered into. This registration process is a simple task that defines few properties of the DOM Element and gives them values which are obtained from the validator control.
- ControlPropertiesValid: This is the method that validate the value of certain control properties that are essential to the success of registering your own validator to .net validation framework.
- EvaluateIsValid: This is the server method triggered when Page.Validate is called. In other words, it is the server side validation method.
- OnPreRender: This is where you register your own client validation function as a javascript file to be loaded in your html page.
After looking at these key properties and methods of the validator control, we will also need to aquire the knowledge of how it works at client side in details.
Client DOM Element
The Html tag the valiator rendered into is span. Its DOM Element is essential to .net client side validation. Now, I want to show you in brief of its position in client validation. (Beware that the handler with which to download the validation library is different when the request page has ScriptManager. Without it, it uses webresource.axd to download validation library and with it, scriptresource.axd. I will be describing the DOM element's significance with the library downloaded from scriptresource.axd.)
Properties associated with in DOM Element
- controltovalidate: the element referenced by this id to be bound with evaluationfunction in onchange event.
- errormessage: the error message to be displayed when the control to validate is invalid.
- validationGroup: the name of the group of validators to be validated.
Functions associated with in DOM Element
- evaluationfunction: this method is called when value in DOM Element is changed and the purpose of this function is to validate the value and return the validity of the value.
Another thing needed to know before we go on to next step creating custom validator control is when the DOM Element that respesents span block rendered by validator control from server side control is initialized with the above properties and function. This will gives us insight into how to create a custom validator control that is fully integrated into .net validation framework.
- Firstly, all validator elements, the span DOM elements, are assigned with each respective validator server control properties and client evaluationfunction in one of the script blocks at the bottom of the page. Usually, it's the third script block from the bottom of the page. It looks like this:
var _tbxFirst_rfv = document.all ? document.all["_tbxFirst_rfv"] : document.getElementById("_tbxFirst_rfv");
_tbxFirst_rfv.controltovalidate = "_tbxFirst";
_tbxFirst_rfv.errormessage = "This field is requried.";
_tbxFirst_rfv.validationGroup = "BibleOrderStepOne";
_tbxFirst_rfv.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
_tbxFirst_rfv.initialvalue = "";- In the second script block from the bottom of the page, ValidatorOnLoad() is called to hook up the control to validate with ValidatedControlOnBlur, ValidatorOnChange or ValidatedTextBoxOnKeyPress function when onchange/onblur/onkeypress event (depending on the type of the control with which to validate) occurs.
- ValidatorHookupControlID is called to ensure that each control which the validator references to is attached to the functions that mentions in the above point. This is where it makes possible that you can assign to it a container which contains more than one controls and the function itself will detect that and registers the validation functions to every controls residing in that container, such as a div or span block.
Having knowing the key details of properties and methos of the validator server control, and of the client validation script's how-it-does-stuff, we are ready to see few examples of how to create your own validator server control and client validation script.
To be continued...
