HTML5 Validation
The HTML5 validation module provides a drop-in replacement for HTML <input>
elements called #{input /}
which automatically adds HTML5 validation attributes to the final output based on your Play! model validation annotations.
Enable the HTML5 validation module
In the /conf/application.conf file, enable the HTML5 validation module by adding this line:
# The HTML5 validation module
module.html5validation=${play.path}/modules/html5validation-1.0
Usage
To use this module, simply replace those <input>
elements which need validation with the #{input /}
tag and specify the field from the corresponding model class. You can use all available attributes from the original HTML5 <input>
element as well. Additional attributes can be set using the attributes
attribute.
The list of available attributes is as follows:
- for: Specifies the field to validate.
- value: Specifies a value for the input element.
- attributes: Additional attributes not yet covered by the
#{input /}
tag. - type: Specifies the content type of the input element.
- id: A unique identifier for the element.
- class: A name of a classification, or list of names of classifications, to which the element belongs.
- form: The value of the id attribute on the form with which to associate the element.
- placeholder: A short hint (one word or a short phrase) intended to aid the user when entering data into the control represented by its element.
- list: The value of the id attribute on the datalist with which to associate the element.
- dir: Specifies the element’s text directionality.
- draggable: Specifies whether the element is draggable.
- hidden: Specifies that the element represents an element that is not yet, or is no longer, relevant.
- accesskey: A key label or list of key labels with which to associate the element; each key label represents a keyboard shortcut which UAs can use to activate the element or give focus to the element.
- contenteditable: Specifies whether the contents of the element are editable.
- contextmenu: The value of the id attribute on the menu with which to associate the element as a context menu.
- lang: Specifies the primary language for the contents of the element and for any of the element’s attributes that contain text.
- spellcheck: Specifies whether the element represents an element whose contents are subject to spell checking and grammar checking.
- style: Specifies zero or more CSS declarations that apply to the element.
- tabindex: Specifies whether the element represents an element that is is focusable (that is, an element which is part of the sequence of focusable elements in the document), and the relative order of the element in the sequence of focusable elements in the document.
- title: Advisory information associated with the element.
- disabled: Specifies that the element represents a disabled control.
- autocomplete: Specifies whether the element represents an input control for which a UA is meant to store the value entered by the user (so that the UA can prefill the form later).
- autofocus:Specifies that the element represents a control to which a UA is meant to give focus as soon as the document is loaded.
- checked: Specifies that the element represents a selected control.
- step: Specifies the value granularity of the element’s value.
Example
Suppose you have a Model class called User
which has a field called name
declared as
@Required
@MaxSize(8)
@Match(“[a-z]*”)
public String name;
you can replace your existing <input>
element with the following:
#{input for:'user.name', id:'YourID', class:'class1 class2', value:field.value /}
The tag will then output the following HTML code:
<input name="user.name" value="${field.value}" id="YourID" class="class1 class2" required maxlength="8" pattern="[a-z]*>
Note: The ${field.value}
expression will actually be resolved to the current value of the users name. field.value
is here used in conjunction with the built-in field tag but you can use other values like ${user?.name}
too.
Supported Annotations
The module currently supports the following annotations:
- "
Required
":http://www.playframework.org/documentation/1.1/validation-builtin#required - "
Email
":http://www.playframework.org/documentation/1.1/validation-builtin#email - "
Min
":http://www.playframework.org/documentation/1.1/validation-builtin#min - "
Max
":http://www.playframework.org/documentation/1.1/validation-builtin#max - "
Range
":http://www.playframework.org/documentation/1.1/validation-builtin#range - "
MaxSize
":http://www.playframework.org/documentation/1.1/validation-builtin#maxSize - "
URL
":http://www.playframework.org/documentation/1.1/validation-builtin#url - "
Match
":http://www.playframework.org/documentation/1.1/validation-builtin#match
Issue tracking
If you want to report a bug or wish for a new feature, please use the issue tracker