WebFu Validation Markup

Regardless of whether you use <WebFu:DataAnnotationValidatorControl ../> or Html.ValidationMessageFor(..), WebFu will use certain conventions in generating and replacing validation markup on your page.

Default CSS classes

Default CSS classes are derived from static properties on the WebFormsUtilities.WFUtilities class for server-side code:
  • WFUtilities.ValidationSummaryValidClass = validation-summary-valid
  • WFUtilities.ValidationSummaryErrorsClass = validation-summary-error
  • WFUtilities.InputValidationErrorClass = input-validation-error
  • WFUtilities.InputValidationValidClass = input-validation-valid
  • WFUtilities.FieldValidationErrorClass = field-validation-error
  • WFUtilities.FieldValidationValidClass = field-validation-valid
For JavaScript code, these values live on the webfu.validation object:
  • webfu.validation.validationSummaryValidClass
  • webfu.validation.validationSummaryErrorsClass
  • webfu.validation.inputValidationErrorClass
  • webfu.validation.inputValidationValidClass
  • webfu.validation.fieldValidationErrorClass
  • webfu.validation.fieldValidationValidClass

jQuery.Validate Parameters

With the above CSS classes that live on the webfu.validation object, the following parameters can also be overridden:
  • webfu.validation.errorElement (span)
  • webfu.validation.errorPlacement see jQuery Validate documentation
  • webfu.validation.success see jQuery Validate documentation
If these value/functions are already defined, WebFu will not overwrite them when setting up client validation.

HtmlHelpers and IHtmlTagPreProcessor

You can ignore this if you are only using <WebFu:... /> server controls

When an HtmlHelper is instantiated, two IHtmlTagPreProcessors are automatically registered.
  • WFValidationPreProcessor
This class adds validation styling to Checkboxes, Textboxes, Select tags, etc. when an error in validation has occurred at the server side.
  • WFHTMLEncodePreProcessor
This class sanitizes the InnerText of TextArea, Label, ValidationMessage and ValidationItem calls as well as the "option" and "value" properties of Checkbox, Hidden, InputBox and RadioButton tags.

Custom IHtmlTagPreProcessor classes can be added using the HtmlHelper.AddPreProcessor() method. These will be executed in the order they are registered. All current IHtmlTagPreProcessors that are registered (including the two default classes) can be cleared using the HtmlHelper.ClearPreProcessors() method.
Registering and clearing PreProcessors must be performed once for every Page. This is due to the fact that HtmlHelper instances are declared at the Page level.

DataAnnotationValidatorControl Markup

If validation rules fail for this control, the output will be a <span> with the WFUtilities.FieldValidationErrorClass applied. The InnerText of the span will either be the error message defined on the control or the error message from the DataAnnotations validator. The ID of this span will be the ASP.NET UniqueID of the control.

What if I don't want a <span> tag?

The <span> tag is used as the central point for server-side and client-side validation text to be updated and styled. If this is to be replaced, then all of the other pieces in the pipeline must be somehow accounted for. There are actually two spans generated for validation -- one by server side code as a placeholder and the other by jQuery Validate within the placeholder.
  • Replacing HtmlHelper Validation Message <span>
The server side markup can be routed around by using HtmlHelper.TextValidationMessageFor() and HtmlHelper.TextValidationMessageIDFor() methods.
The TextValidationMessageFor() method will supply the raw error message if any errors have occurred, otherwise it will return empty.
The TextValidationMessageIDFor() method will supply the ID of the tag that the client-side code will be looking to update.
The client-side markup can use JavaScript to override the webfu.validation.errorElement String value to the desired element.
  • Replacing DataAnnotationValidatorControl <span>
The DataAnnotationValidatorControl does not support the same level of control over the markup as the HtmlHelpers do (it must cooperate with Web Forms validation, postback, unique ID, etc.), but overriding the tag name is supported using the HTMLTagName attribute on the <WebFu:DataAnnotationValidatorControl ..> tag. If this property is not set, then the tag will default to <span>.

Last edited May 24, 2012 at 2:45 AM by aikeru, version 6


No comments yet.