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.

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:

<inputtype="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:

<inputtype="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
}
 
<inputtype="text" data-required>
<inputtype="text" data-validate="email">
<inputtype="text" data-validate="min:6" data-required>
<inputtype="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:

<inputtype="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:

<inputtype="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();