Hello Folks,
In one of my earlier post I had given a complete overview of all the validation control provided by ASP.NET. In that some how
I missed to provided enough details for the Custom validation control. This blog
is dedicated to provide the details about the
CustomValidator control. I will be discussing both the Client side
and Server side custom validation.
To give a brief overview, the code that I am going to use below will try to validate
a phone number which is of the format xxx-xxxxxxxx where x stands for number(0-9).
Important attributes associate with CustomValidator
Control.
ControlToValidate:This attribute accepts
the ID of the control that we want to validate
ClientValidationFunction:Client side
function that is used to validate the user input
OnServerValidate:Server side function
that is used to validate the user input
ValidateEmptyText:This accepts a bool
value, setting it to false will ensure that validation is bypassed in case of empty
string. If you want to validate for empty input as well set ValidateEmptyText
to true.
ToolTip: The tooltip message that you
want to display on mouse hover
ErrorMessage:Error message that is displayed
on the screen in case the validation fails
|
<div>
<asp:TextBox runat="server"
ID="txtInputBox"
CausesValidation="true"
ValidationGroup="CustomValidatorGroup"></asp:TextBox>
<asp:CustomValidator runat="server" ControlToValidate="txtInputBox" Display="Dynamic"
ErrorMessage="*" ClientValidationFunction="ClientValidatePhoneNumber"
OnServerValidate="ValidateForPhoneNumber"
ToolTip="Please
enter valid phone number." ValidationGroup="CustomValidatorGroup"
ValidateEmptyText="true"
/>
<asp:Button ID="btnSubmit"
runat="server"
Text="Click"
OnClick="btnClickEvent"
ValidationGroup="CustomValidatorGroup"
/>
</div>
|
Now let's first see the Server side validation.
|
protected
void ValidateForPhoneNumber(object
sender, ServerValidateEventArgs e)
{
e.IsValid
= false;
if
(!string.IsNullOrEmpty(e.Value))
{
char[] sc = new char[]
{ '-' };
string[] splitInput = e.Value.Split(sc, StringSplitOptions.RemoveEmptyEntries);
if (splitInput.Length == 2)
{
if (Regex.IsMatch(splitInput[0],
"[0-9]{3}") && Regex.IsMatch(splitInput[1],
"[0-9]{8}"))
{
e.IsValid = true;
}
}
}
}
|
The ServerValidateEventArgs contains
two important property. Value and
IsValid, The Value is the input which needs to be validated and the IsValid
is the property that is used to decide if validation passed or failed. Rest of the
code is logic to validate the phone number.
In the button click event we first need to check if the validation was success or
not and for that, we first need to add a check for
Page.IsValid, and if this is true we can go ahead with executing rest of
the code.
|
protected
void btnClickEvent(object
sender, EventArgs e)
{
if (this.IsValid)
{
ClientScript.RegisterClientScriptBlock(typeof(Page), "script",
"alert('Validation was success');",
true);
}
}
|
Now let's have a look at the client side validation, for this we need to add the
attribute ClientValidationFunction and
add the JavaScript method.
|
<script type="text/javascript">
function
ClientValidatePhoneNumber(source, args) {
args.IsValid = false;
if (null != args) {
var reg1 = '[0-9]{3}';
var reg2 = '[0-9]{8}';
var si = args.Value.split('-');
if (si == 2 && reg1.test(si[0]) && reg2.test(si[1])) {
args.IsValid = true;
}
}
}
</script>
|
Here the source parameter refers to the CustomValidator control while the args contains
Value and IsValid as two important property, these two property do the same thing
as the server side fields do. Client side validation will take place only if JavaScript
is enabled, if not server side validation will take place.
Note: Server side validation occur even
if client side validation passes.
Happy learning :)