FormCheck

Performs different tests on forms and indicates errors.

Usage

Works with these types of fields :

• input (text, radio, checkbox)
• textarea
• select

You just need to add a specific class to each fields you want to check.  For example, if you add the class

validate['required','length[4, -1]','differs:email','digit']

the value’s field must be set (required) with a minimum length of four chars (4, -1), must differs of the input named email (differs:email), and must be digit.

You can perform check during the datas entry or on the submit action, shows errors as tips or in a div before or after the field, show errors one by one or all together, show a list of all errors at the top of the form, localize error messages, add new regex check, ...

The layout is design only with css.  Now I added a hack to use transparent png with IE6, so you can use png images in formcheck.css (works only for theme, so the file must be named formcheck.css).  It can also works with multiple forms on a single html page.  The class supports now internationalization.  To use it, simply specify a new <script> element in your html head, like this : <script type=”text/javascript” src=”formcheck/lang/fr.js”></script>.

If you add the class

validate['submit']

to an element like an anchor (or anything else), this element will act as a submit button.

N.B.  : you must load the language script before the formcheck and this method overpass the old way.  You can create new languages following existing ones.  You can otherwise still specifiy the alerts’ strings when you initialize the Class, with options.  If you don’t use a language script, the alert will be displayed in english.

Test type

You can perform various test on fields by adding them to the validate class.  Be careful to not use space chars.  Here is the list of them.

You can also use a custom function to check a field.  For example, if you have a field with class

validate['required','%customCheck']

the function customCheck(el) will be called to validate the field.  ‘%customcheck’ works with other validate(s) together, and ‘~customcheck’ works if the element pass the other validate(s).  Here is an example of what customCheck could look :

function customCheck(el){
    if (!el.value.test(/^[A-Z]/)) {
        el.errors.push("Username should begin with an uppercase letter");
        return false;
    } else {
        return true;
    }
}

To validate checkoxes group, you could make something like :

<input type="checkbox" name="dog" class="validate['group[1,2]']">
<input type="checkbox" name="cat" class="validate['group[1]']">
<input type="checkbox" name="mouse" class="validate['group[1]']">

For checkboxes from group 1, you will need to check at least 2 boxes.

It is now possible to register new fields after a new FormCheck call by using FormCheck::register (see <FormCheck::dispose> too).  You need first to add the validate class to the element you want to register ( $(‘myInput’).addClass(“validate[‘required’]”) ).

Parameters

When you initialize the class with addEvent, you can set some options.  If you want to modify regex, you must do it in a hash, like for display or alert.  You can also add new regex check method by adding the regex and an alert with the same name.

Required

Optional

Display

This is a hash of display settings. in here you can modify.

Alerts

This is a hash of alerts settings. in here you can modify strings to localize or wathever else.  %0 and %1 represent the argument.

Example

You can initialize a formcheck (no scroll, custom classes and alert) by adding for example this in your html head this code :

<script type="text/javascript">
    window.addEvent('domready', function() {
        var myCheck = new FormCheck('form_id', {
            tipsClass : 'tips_box',
            display : {
                scrollToFirst : false
            },
            alerts : {
                required : 'This field is ablolutely required! Please enter a value'
            }
        })
    });
</script>

About

by Mootools.Floor (http://mootools.floor.ch) MIT-style license

Created by Luca Pillonel (luca-at-nolocation.org), Last modified by Luca Pillonel

Credits

This class was inspired by fValidator by Fabio Zendhi Nagao (http://zend.lojcomm.com.br)

Thanks to all contributors from groups.google.com/group/moofloor (and others as well!) providing ideas, translations, fixes and motivation!