Get Loom

Form tags

Forms

<l:form action="Mortgages" event="save">		
	<l:inputHidden name="mortgage.id"/>
	<l:inputText name="mortgage.name"/>
	<l:inputCheckbox name="mortgage.starred"/>
	<l:inputDate name="mortgage.creationDate"/> 
	<l:inputSelect name="mortgage.country" options="${action.countries}" />
	<l:inputFile name="mortgage.photo"/>
</l:form>

The <form> tag include a target action and event that are not only used to generate the target URL but also dictates the validations that will be applied to the input fields.

Form input fields

Each form input field will generate automatically some details such as the maxlength and size attributes, and the corresponding decorator will generate the input field label.

Form input fields have a name that is used as a property path inside the action class. The input field will get bound to the associated java property, such as:

<!-- simple property -->
<l:inputText name="customer.name"/>

<!-- property with multiple intermediate node (list or array) -->
<l:inputText name="customer.friend[2].name"/>

<!-- property with mapped intermediate node (map) -->
<l:inputText name="customer.friend[john].name"/>

Automatic CSS classes

Some validators and converters contribute to the calculated CSS class of any field.

number: added if the property is a number.
error: added if the field has associated validation/conversion errors.
date: added if the property is a date.
required: added if the property is required.
string: added if the property is a string.
unauthorized: A link that points to an event that the user has insufficient privileges to invoke.

These styles can be used to adjust styles using CSS or to connect with javascript handlers.

Displaying form errors

Form errors can be displayed using a <l:errors> tag. When nested inside a form, this tag will display a list of errors that have not been already rendered bound to a field.

The same HTML structure will be used by javascript validation code, so an error can be generated by the server and cleaned up by the browser when the user fixes the wrong data, before sending again to the server.

Enabling javascript validation

To validate form input using javascript:

<l:form id="myform">
  ...form contents go here...
</l:form>

<script>
  $('myform').bindValidations();
</script>