README.md

ValidateSimple

A MooTools class for realtime, client-side validation of form inputs. Given a form it will
fire events as inputs become valid/invalid as the user is typing. It will also, of course,
alert you when the entire form is valid.

Validators themselves can be created by you, and a small set of them is provided to get you
started (in the ValidateSimple.Validators object). Validators can optionally be asynchronous, which is useful when using some server-side validation logic.

Note: this is not a drop-in "plugin" that will do everything for you. This code does not
enforce any kind of UI whatsoever, it just fires events and lets you handle what is
displayed. If you want a more hands-off validator use the standard MooTools More
one. I created this to be more light-weight, have greater flexibility in when forms are
validated and handle asynchronous validations.

How to use

In your HTML, add classnames of the form "validate-TYPE" where TYPE is something like "email".

new ValidateSimple(form_element, {
inputs: 'form input[type=text], form input[type=email]',
onValid: function(){
// do something like activate the submit button
},
onInvalid: function(){
// do something like deactivate the submit button
},
onInputInvalid: function(input, errors){
// do something like show an error message somewhere, possibly based off the input's title attr
// errors (2nd arg) will contain an array of strings - each string is the validation type that
// failed. Example: ['email', 'no-troll']
}
});

Here's what happens next:

The user starts typing into one of the inputs.

The user tabs/clicks out of the input (possibly to another).

The user made a mistake, and onInputInvalid is fired. A class "invalid" is automatically
added to the input as well.

The user clicks back to the input to make a mistake.

Now, as they type, each keyup will check the input and remove the "invalid" class as soon
as it is correct. The onInputInvalid and onInputValid events will also fire for each keyup.

Once all inputs are valid (meaning they don't have the "invalid" class), the
onValid event fires.

What this means is that the first time a user fills out a given input, it will
wait until they are finished to alert them. But, once they go back to an input
alerting (of valid or invalid) will happen as they type. The entire form's
validity is always based on each keyup.

Now in your onInputInvalid callback, you can check for "no-troll" in the errors
array, and do something to the troll you caught. ;7

A validator can optionally have a 'postMatch' method that will be called upon a successful test, if the test returned the result of a call to String.match. It will be passed the match data, and the input that was tested. This is useful for reformatting valid input a format of your choice, for normalization.

Asynchronous Validators

If a validator object definition includes async: true, that test will be treated as an asynchronous test. This is typically used for validations that require a call to your server. The test function is passed the input (as usual) and a method to pass your test result as a boolean. Note: asynchronous validators only run after all other validators on an input have passed (this is to save on network calls and general complexity). Here is an example:

alertUnedited - (boolean: defaults to true) validate/alert inputs that have not been edited.

alertPrefilled - (boolean: defaults to true) validate/alert inputs that have a value on page load.

validateFieldsets - (boolean: defaults to false) adds valid/invalid classes to entire fieldsets, based on the inputs in them. Also fires invalidFieldset and validFieldset events and passes the fieldset.