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 as div 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. It can also works with multiple forms on a single html page.
Test type
You can perform various test on fields by addind them to the validate class. Be careful to not use space chars. Here is the list of them.
| required | The field becomes required. This is a regex, you can change it with class options. |
| alpha | The value is restricted to alphabetic chars. This is a regex, you can change it with class options. |
| alphanum | The value is restricted to alphanumeric characters only. This is a regex, you can change it with class options. |
| nodigit | The field doesn’t accept digit chars. This is a regex, you can change it with class options. |
| digit | The value is restricted to digit (no floating point number) chars, you can pass two arguments (f.e. digit[21,65]) to limit the number between them. Use -1 as second argument to not set a maximum. |
| number | The value is restricted to number, including floating point number. This is a regex, you can change it with class options. |
| email | The value is restricted to valid email. This is a regex, you can change it with class options. |
| phone | The value is restricted to phone chars. This is a regex, you can change it with class options. |
| url: | The value is restricted to url. This is a regex, you can change it with class options. |
| confirm | The value has to be the same as the one passed in argument. f.e. confirm[password]. |
| differs | The value has to be diferent as the one passed in argument. f.e. differs[user]. |
| length | The value length is restricted by argument (f.e. length[6,10]). Use -1 as second argument to not set a maximum. |
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.
| form_id | The id of the formular. This is required. |
| tips_class | The class to apply to tipboxes’ errors. By default it is ‘tipsbox’. |
| error_class | The class to apply to fields with error. By default it is ‘error_f’. |
| display | This is a hash of display settings. in here you can modify : |
| showErrors | 0 : onSubmit, 1 : onSubmit & onBlur, by default it is 1. |
| errorsLocation | 0 : no, 1 : tips, 2 : after, by default it is 1. |
| indicateErrors | 0 : none, 1 : one by one, 2 : all, by default it is 1. |
| tipsOffsetLeft | Left position of the tips box (margin-left), , by default it is 100 (px). |
| listErrorsAtTop | List all errors at the top of the form, , by default it is false. |
| scrollToFirst | Smooth scroll the page to first error and focus on it, by default it is true. |
| fadeDuration | Transition duration (in ms), by default it is 300. |
| 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. |
required: “This field is required.”, alpha: “This field accepts alphabetic characters only.”, alphanum: “This field accepts alphanumeric characters only.”, digit: “Please enter a valid integer.”, digitmin: “The number must be at least %0”, digitltd: “The value must be between %0 and %1”, number: “Please enter a valid number.”, email: “Please enter a valid email.”, phone: “Please enter a valid phone.”, url: “Please enter a valid url.”, confirm: “This field is different from %0”, differs: “This value must be different of %0”, length: “The length is incorrect, it must be between %0 and %1”, lengthmax: “The length is incorrect, it must be at max %0”, lengthmin: “The length is incorrect, it must be at least %0”, checkbox: “Please check the box”, radios: “Please select a radio”, select: “Please choose a value”
Example
You can initialize a formcheck 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', {
tips_class : 'tips_box',
error_class : 'error_field',
display : {
scrollToFirst : false
},
alerts : {
required : 'This field is ablolutely required! Please enter a value'
}
})
});
</script>
About
| formcheck2.js v.1.0 for mootools v1.1 | 07 / 2007 |
by Floor SA (http://www.floor.ch) MIT-style license
Created by Luca Pillonel and David Mignot, last modified by Luca Pillonel 07.09.07
Summary
| Performs different tests on forms and indicates errors. |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |