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:
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.
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.
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.
Imagine you have this snippet of HTML code:
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:
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:
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.
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;
Enable a validator via javascript
The method to enable or disable a validator is:function ValidatorEnable(val, enable)
Force a validation via javascript
In case you want to ask to a validator to do his job:function ValidatorValidate(val, validationGroup, event)
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." />
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>
And in case I wanted to force the validation I should have written:
ValidatorValidate($("#<%= valEncOtherMimeTypeRequired.ClientID %>")[0]);
No comments:
Post a Comment