mForm Documentation
Installation
MForm requires a new version of MooTools and
MooTools More/Element.Measure.
Include mForm.Core.js together with mForm.css and you are ready to go.
- MooTools 1.4.4
- MooTools More/Element.Measure
- mForm.Core.js
- assets/mForm.css
Setup
All options for your form elements are set in mForm.Core.js.
Style
Styling your form elements is straight forward with CSS, just edit mForm.css to your liking.
Submit events
You can set your forms to submit when the user presses CONTROL + S or ENTER:
options: { submitFormOnControlS: true, // Works in textfields and textareas submitFormOnEnter: true // Works in textfields only }
Required elements
To mark an input field as required, use the attribute data-required:
<input … type="text" data-required>
requiredElements is currently supportet for textfields, textareas and the custom select field.
You can change the appearance of the red dot in /assets/sprites.png.
To hide the red dot for a single element, add the attribute data-required-hidden:
<input … type="text" data-required data-required-hidden>
The attribute data-required is also used for validation. Read more in the next section about validation.
Validation
There are two ways to validate your form elements, onBlur and onSubmit:
onBlur means, the element gets validated when it looses its focus (onBlur event).
onSubmit means, they get validated when you submit the form (works only with mForm.Submit class).
To validate elements onBlur, set validateOnBlur to true:
options { validateOnBlur: true }
<input … type="text" data-required> <input … type="text" data-validate="email"> <input … type="text" data-validate="min:6" data-required> <input … type="text" data-validate="max:12">
Currently you can use following validations:
data-validate="email" | Valid email |
data-validate="min:6" | A minimum of 6 characters |
data-validate="max:12" | A maximum of 12 characters |
data-validate="/(red|blue)/" | You can also make your own patterns |
To validate your elements when submitting a form, read more in the mForm.Submit: Validation section.
Custom placeholders
Your HTML5 placeholders are now cross-browser compatible, just set the attribute placeholer:
<input … type="text" placeholder="My placeholder">
Custom placeholders adds a wrapper around the element in old browsers, this can have unexpected results. I advise to check your forms on all common browsers before you go online.
Custom select fields
Replace those clumsy browser-default select fields with advanced ones simply by adding data-select:
<select data-select placeholder="Please select your country"> … </select>
You need to include mForm.Element.js and mForm.Element.Select.js to use the custom select fields.
Read more about this in section mForm.Element.Select.
Custom number textfields
To prevent a user of typing something else than a real number into a textfield use data-number:
<input … type="text" data-number>
Reset a form
To reset a forms, use the function reset() on the global form instance:
form.reset($('myForm'));
Reinitialize mForm
The events for your form elements are set in mForm.Core.js on domready.
When you load new content (e.g. with Ajax), or create new form elements, which use mForm functionalities, you need to reinitialize mForm.
Use the function reInit() on the global form instance to initialize new form elements:
form.reInit();