Validators are a great part of the ASP.NET framework: they provide a standardized and easy way to add validation to form fields. But even if the framework provides different kinds of validators, there are so many different validations patterns that sometimes you have to write custom code to match your specific requirements.
I wrote a post a few months ago about how to write a custom validator for a Checkbox list, but I was dealing with a completely new validation pattern. But what if I only want to enable the validation of certain field based on certain conditions? Or if I want to validate based on an event that is not the OnChange event of the form field? And all of this while keeping the standard validation logic?
If the condition can be determined in the code-behind it's easy:
//Disable server side validation
myRequiredFieldValidator.Enabled = false;
//Disable client side validation
myRequiredFieldValidator.EnableClientScript = false;
But what if I want to enable the validator from javascript? I didn't find anything online about this so I debugged the ASP.NET js validation library to look for the method that enables the validation, and for the one that forces the validation check.
Enable a validator via javascript
The method to enable or disable a validator is:
function ValidatorEnable(val, enable)
where val is the reference to the <span> element that the validator uses to render the error message, and enable is a boolean to tell the method whether to enable or disable the validation.
Force a validation via javascript
In case you want to ask to a validator to do his job:
function ValidatorValidate(val, validationGroup, event)
val is again the reference to the validator <span>, validationGroup is the name of the validation group of the element that is triggering the validation, event is the reference to the event that triggered the validation. But only the first parameter is useful when you want to force the validation, since the others are used only by the standard validation of ASP.NET.
A real life example
Let's see a example from the code I'm writing for one of the new features of Subtext.
Imagine you have this snippet of HTML code:
<asp:DropDownList ID="ddlMimeType" runat="server">
<asp:ListItem Value="mp3">audio/mpeg</asp:ListItem>
<asp:ListItem Value="wma">audio/wma</asp:ListItem>
<asp:ListItem Value="other">Other</asp:ListItem>
</asp:DropDownList>
<asp:TextBox id="txbOtherMimetype" runat="server" />
<asp:RequiredFieldValidator id="valOtherMimetypeRequired" runat="server"
ControlToValidate="txbOtherMimetype" ForeColor="#990066"
ErrorMessage="You have to specify a custom mimetype." />
And you want to enable the valOtherMimeTypeRequired validator only when the option selected in the drop down is "other".
Using jQuery here is the javascript code to do the job:
<script type="text/javascript">
$(document).ready(function()
{
$("#<%= ddlMimeType.ClientID %>").change(function()
{
toggleOtherMimeType(this);
});
}
function toggleOtherMimeType(elem)
{
if(elem!=undefined)
{
if(elem.value=="other")
{
$("#<%= txbEnclosureOtherMimetype.ClientID %>").show();
ValidatorEnable($("#<%= valEncOtherMimetypeRequired.ClientID %>")[0], true);
}
else
{
$("#<%= txbEnclosureOtherMimetype.ClientID %>").hide();
ValidatorEnable($("#<%= valEncOtherMimetypeRequired.ClientID %>")[0], false);
}
}
}
</script>
Notice the <%= ddlMimeType.ClientID %> to select a server-side control using the automatically generated client ID and the $("#elemendId")[0] to get the real DOM element and not the jQuery wrapper around it.
And in case I wanted to force the validation I should have written:
ValidatorValidate($("#<%= valEncOtherMimeTypeRequired.ClientID %>")[0]);
It took me a while to find out this method name. I hope this will save you a bit of the time I spent hunting down the names using Firebug.
