This new feature will allow us to configure our validator controls for the use of unobtrusive client validation logic in a very simple way. A very significant benefit of doing this is the reduction of the amount of JavaScript rendered in the page, making it substantially smaller.
Note that unobtrusive means not obtrusive or undesirably noticeable, which is generally a good practice for JavaScript, meaning that there is a separation of responsibility between the web page (presentation) and its behavior.
In order to use this recipe you should have Visual Studio 2012. We will use this as well as the application generated from our previous recipe.
Here we will create a sample app and see how to apply unobtrusive validation to it and how it affects the resulting HTML.
Web.Config
file.<appSettings>
element.<add key="ValidationSettings:UnobtrusiveValidationMode" value="none" />
Book.aspx
page and add the following code (a control and two validators) at the end of the ItemTemplate
section:<asp:TextBoxID="TbValidation"runat="server"/> <asp:RequiredFieldValidatorID="tbvalidator1"runat="server"ErrorMessage="The field is required.." ControlToValidate="TbValidation"EnableClientScript="true"/> <asp:RangeValidatorID="tbrangevalidator1"runat="server"ErrorMessage="The range allowed is from 10 to 100" ControlToValidate="TbValidation"EnableClientScript="true"/>
<input name="ctl00$FeaturedContent$BookDetails$TbValidation" type="text" id="FeaturedContent_BookDetails_TbValidation" /> <span id="FeaturedContent_BookDetails_tbvalidator1" style="visibility:hidden;">The field is required..</span> <span id="FeaturedContent_BookDetails_tbrangevalidator1" style="visibility:hidden;">The range allowed is from 10 to 100</span>
<script type="text/javascript"> //<![CDATA[ var Page_Validators = new Array(document.getElementById("FeaturedContent_BookDetails_tbvalidator1"), document.getElementById("FeaturedContent_BookDetails_tbrangevalidator1")); //]]> </script> <script type="text/javascript"> //<![CDATA[ var FeaturedContent_BookDetails_tbvalidator1 = document.all ? document.all["FeaturedContent_BookDetails_tbvalidator1"] : document.getElementById("FeaturedContent_BookDetails_tbvalidator1"); FeaturedContent_BookDetails_tbvalidator1.controltovalidate = "FeaturedContent_BookDetails_TbValidation"; FeaturedContent_BookDetails_tbvalidator1.errormessage = "The field is required.."; FeaturedContent_BookDetails_tbvalidator1.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid"; FeaturedContent_BookDetails_tbvalidator1.initialvalue = ""; var FeaturedContent_BookDetails_tbrangevalidator1 = document.all ? document.all["FeaturedContent_BookDetails_tbrangevalidator1"] : document.getElementById("FeaturedContent_BookDetails_tbrangevalidator1"); FeaturedContent_BookDetails_tbrangevalidator1.controltovalidate = "FeaturedContent_BookDetails_TbValidation"; FeaturedContent_BookDetails_tbrangevalidator1.errormessage = "The range allowed is from 10 to 100"; FeaturedContent_BookDetails_tbrangevalidator1.evaluationfunction = "RangeValidatorEvaluateIsValid"; FeaturedContent_BookDetails_tbrangevalidator1.maximumvalue = ""; FeaturedContent_BookDetails_tbrangevalidator1.minimumvalue = ""; //]]> </script> <script type="text/javascript"> //<![CDATA[ var Page_ValidationActive = false; if (typeof(ValidatorOnLoad) == "function") { ValidatorOnLoad(); } function ValidatorOnSubmit() { if (Page_ValidationActive) { return ValidatorCommonOnSubmit(); } else { return true; } } document.getElementById('FeaturedContent_BookDetails_tbvalidator1').dispose = function() { Array.remove(Page_Validators, document.getElementById('FeaturedContent_BookDetails_tbvalidator1')); } document.getElementById('FeaturedContent_BookDetails_tbrangevalidator1').dispose = function() { Array.remove(Page_Validators, document.getElementById('FeaturedContent_BookDetails_tbrangevalidator1')); } //]]> </script>
Web.config
file and change the value to WebForms
:<add key="ValidationSettings:UnobtrusiveValidationMode" value="WebForms" />
<input name="ctl00$FeaturedContent$BookDetails$TbValidation" type="text" id="FeaturedContent_BookDetails_TbValidation" /> <span data-val-controltovalidate="FeaturedContent_BookDetails_TbValidation" data-val-errormessage="The field is required.." id="FeaturedContent_BookDetails_tbvalidator1" data-val="true" data-val-evaluationfunction="RequiredFieldValidatorEvaluateIsValid" data-val-initialvalue="" style="visibility:hidden;">The field is required..</span> <span data-val-controltovalidate="FeaturedContent_BookDetails_TbValidation" data-val-errormessage="The range allowed is from 10 to 100" id="FeaturedContent_BookDetails_tbrangevalidator1" data-val="true" data-val-evaluationfunction="RangeValidatorEvaluateIsValid" data-val-maximumvalue="" data-val-minimumvalue="" style="visibility:hidden;">The range allowed is from 10 to 100</span>