Client-Side Validation with MyFaces ExtVal & BV

!!! DRAFT !!!

Required features

• Adding js transparently based on
  • Constraints
  • JSF validators/validation methods

  • JSF converters (client-side conversion (ClientConverter))

• Client side conversion(ClientConverter) is also required to be compatible with server side validation processing.

• Group validation (partial validation)

• Skipable validation (see @SkipValidation)

  • Skip validation for immediate components
• Bypass validation for command components

  • (see @BypassValidation and @BypassBeanValidation (= existing ExtVal-add-ons))

• Cross-validation
• Validation triggered by
  • Input components
    • Connecting validation to events (onblur, ...)
  • Command components
• Client interception of validation exceptions
  • (e.g. for generic component highlighting,...)
• Interaction with Ajax-validation
  • (e.g. for model aware validation)

• Restrict exposing sensitive information to the client -> fallback to Ajax validation

• Input masking for dates, numbers, etc., based on the server side formats.
• Correctly positioning and styling error messages, so the user doesn't see the difference between client-side and server-side generated messages.
  • (we might need to do some tricks here, since UIMessage(s) doesn't render anything when there are no messages).

Reusing annotations

• Any validation constraints

• @ResourceDependency (@ResourceDependencies)

• Reuse existing BeanValidation annotations

  • (we probably need to disable Bean Validation, because otherwise the user may see double error messages)

Changing existing annotations

• - Additional target for @ResourceDependency (java.lang.annotation.ElementType.METHOD)

  • (for validation methods)

Possible approaches to mark client-side validation

• Implicit via @ResourceDependency

• Additional interface

• @ClientValidator

Use a pluggable marker mechanism. -> Impl. for JSF 1.x are able to provide an equivalent to @ResourceDependency

At the client

• JavaScript

• CSS (for highlighting - has to consider possible skinning approaches)
• Minimize JS code in web page (performance, external JS file may be cached, readability...)

At the server

• JSF

• MyFaces ExtVal

  • Core
  • JSR 303 validation module
  • Client-side validation add-on

(It should also work with JSF 1.x! JSF 2.1+ might specify all/some of the final concepts.)

Possibilities for hosting add-on(s)

• ExtVal add-on

  • http://code.google.com/p/primefaces/

  • http://code.google.com/p/os890

  • http://code.google.com/p/sandbox890

Existing (generic) solutions which might be part of the final approach

• Trinidad client-side validation (concept of org.apache.myfaces.trinidad.validator.ClientValidator)

Concepts to think about

• Client-side facade for triggering validation
  • (behind the facade there is a "storage/repository" of validators and one for validation rules
    • (concerning events, conditions for skipping validation, maybe validation messages, target of validation messages) such repositories have to be aware of PPR)
    Usage within the page would be something like: javax.faces.Page.getInstance().validate(this, ...) If "this" is an input field, the field is validated based on the information in the repositories. If "this" is form, the whole form is validated based on the information in the repositories.