The form component is used to easily generate html forms on your web application. It is recommended to use the form-* component instead of using the standard HTML forms.
The form component can ease writing client-side validation scripts and protects against the so-called CSRF (Cross-site request forgery)-attacks.
Additionally, the form component can help with generating layouts, it will wrap every input and label in an html table, or a list of label-tags.
<fm:Form method="post" action="/action/login">
<fm:Form_TextInput name="user" label="Username" />
<fm:Form_Password name="password" label="Password" />
<fm:Form_Custom><input type="submit" value="Login!" /></fm:Form_Custom>
</fm:Form>
This will look like:
Sourcecode:
<form action="/action/login" id="ccf327b643" method="post" >
<input type="hidden" style="display:none" name="fm_token" value="08850de2a05422fa5b685d32fa0a8e0d" />
<table>
<tr><th><label for="ccf327b643_user">Username</label></th><td><input type="text" class="fmTextInput" id="ccf327b643_user" name="user" /></td></tr>
<tr><th><label for="ccf327b643_password">Password</label></th><td><input type="password" class="fmTextInput fmPassword" id="ccf327b643_password" name="password" /></td></tr>
<tr><th><label for="ccf327b643_"></label></th><td><input type="submit" value="Login!" /></td></tr>
</table>
</form>
As you can see in the sourcecode, there is an 'fm_token' hidden field. This allows us to protect against CSRF attacks. There's a unique id attached to the form (which can be overridden). We use this to uniquely identify this form using the javascript validator.
| Name | Required | Default | Description |
|---|---|---|---|
| action | Optional | Use this to change the action attribute of the html form tag. | |
| class | Optional | This can be used to add a css class to the html form tag. | |
| enctype | Optional | Use this to change the enctype attribute of the html form tag. | |
| formType | Optional | table | This attribute defines how the form will be rendered. If you're not happy with the standard table layout, use this setting to change it. Possible options are: table (the default), list (the form is in an <ul> tag with <li> tags for each field), proper (Just <label> and <input>-tags are generated) and simple (no labels are displayed, and only the input fields) |
| id | Optional | randomly generated | Use this to change the id attribute of the html form tag. |
| method | Optional | get | get or post. This is just sent along while writing the HTML tag |
| noToken | Optional | 0 | If this is specified, no CSRF token is generated. Actions like the login action don't actually need this, and this is also recommended if your for example using a form as a search box |
| onValidateError | Optional | The javascript in this attribute will be invoked when a validation error occurred. See below for more info. | |
| onsubmit | Optional | Use this to change the onsubmit attribute of the html form tag. | |
| redirectUrl | Optional | If this is specified, a 'redirectUrl' hidden field is sent along with the form with this value. Note that currently not every action supports this, but most of them do. | |
| style | Optional | Use this to change the style attribute of the html form tag. | |
| target | Optional | Use this to change the target attribute of the html form tag. | |
| validate | Optional | 0 | Turn on validation for this form. See below for more info. |
| validatorVersion | Optional | Use jQuery or Classic validation code. Set as 2 for jQuery. Any other value will use the classic method. |
This component defines no template variables.
The form component has a built-in validation system. To enable this, make sure you include our standard javascript library in your html header.
<head>
...
<script type="text/javscript" src="/services/jslibrary/1.1"></script>
...
</head>
For most applications, this is already done for you.
Next, you'll need to add 2 new attributes. 'validate' and 'onValidateError'. As an example we'll use our earlier login form:
<fm:Form method="post" action="/action/login" validate="1" onValidateError="alert(message);" noToken="1">
<fm:Form_TextInput name="user" label="Username" required="1" />
<fm:Form_Password name="password" label="Password" required="1" />
<fm:Form_Custom><input type="submit" value="Login!" /></fm:Form_Custom>
</fm:Form>
We marked both fields as required, and popup a javascript alert when validation failed. Try it out:
The 'required' field will add the css class 'required' in the background. The formvalidator will loop through all input fields with the classname with the classname 'required' and throw an appropriate error. You can replace the alert with something better for your needs, as we think the javascript-alert is not the best looking feedback.
Instead of relying on our template engine to generate this for you, you can also use our validator scripts directly.
<script type="text/javascript">
var MyFormValidator = new FMFormValidate();
MyFormValidator.addValidationErrorListener(function(element, message)) {
// Element will give you a direct reference to the offending form element (so you could choose to highlight it)
// Message is the actual error message
}
</script>
<form onsubmit="return MyFormValidator.submit(this);">
...
</form>
Additionally you can specify addValidationSuccessListener if you want to intercept successful validation. This event is only available in the javascript object, but not in the form component.