LiveValidation

Validation as you type!

Chatter...


12Feb

Git it on!

The project has now been migrated to GitHub. All current and future development will be done on this repository, not the previous SVN repo.

View the repository, with previously tagged releases at:

http://github.com/alechill/livevalidation

Current work is underway on adding hooks for your own callbacks pre and post validation, and on validating remotely by AJAX, amongst some minor bug fixes. Expect a new release in a month or two!


30Sept

Update

So it has been some time now since he last release, but don’t worry, the project is still going as time allows, and is gradually having additions made, and further releases are going to be made in the not too distant future. The current version is very stable and has now been tested in the much hyped new Google Chrome browser too, with no changes required. Until the next release, happy validating....


24Feb

New release - version 1.3!

It’s been a while since the last release, but that has allowed time for all the great feedback to be acted upon. All that adds to up to quite a lot of changes behind the scenes, and a lot of new functionality to allow validations to be dynamically assigned/removed/destroyed, and to use your own custom functions to validate against.

Here’s a quick run down of what’s new:

  • Validate.Custom validation has been added so you can define your own custom function - which if it returns true will pass the validation.
  • Validate.Format now has a negate option, which if true will validate that the value DOES NOT match the regular expression.
  • Validate.Inclusion and Exclusion can both be made to treat strings case insensitively, by setting the new caseSensitive option to false.
  • File input fields are supported.
  • Disabled fields are now respected, and are not validated. The helper methods, disable and enable, have been added to provide an easy way to do this, while also removing any previous validation messages etc for that field
  • You can remove specific validations that have been added to a LiveValidation field, using the new remove method.
  • You can destroy a LiveValidation object using the new destroy method. Useful if you want to change the default values, or all of the validations upon that field.
  • Events system has had an overhaul, so any predefined events that LiveValidation would otherwise hijack are now preserved (meaning Rails ajax form helpers will now work properly)
  • LiveValidationForms get created in their own namespace rather than being made global.
  • Various bug fixes
  • Prototype version tested against prototype 1.6.0.2

Documentation is up to scratch so you can start using the new features, and examples will be on their way over the next few days.


25Sept

Version 1.2 is here!

This release makes working with entire forms much easier, and the great thing is that it is all automatic so you won’t have to do anything! What it does mean however is that if you were using a previous version using massValidate to perform validation when the form is submitted, then you will no longer need to do that.

When a LiveValidation object is instantiated, it now checks if it belongs to a form, and if it does then it automatically binds itself to the submit event of that form. This means that when the form is submitted, validation will be performed on all fields in it that have been made into LiveValidation objects, and if any fail the form will not submit and the messages will be shown to indicate the errors (please note - make sure you have appropriate server-side validation too, as you cannot guarantee that the user will have javascript enabled).

This update also gives you access to another option when instantiating a LiveValidation object - onlyOnSubmit - which unsurprisingly will mean that, if set to true, validation will only be performed when the form is submitted.

These updates are demonstrated in the following example (although the outcome is overidden if it is valid as this page has nowhere to submit to - instead of submitting, it will alert that it is valid):

Example of easy form validation


var field1 = new LiveValidation( 'field1', {onlyOnSubmit: true } );
field1.add( Validate.Email );
var field2 = new LiveValidation( 'field2', {onlyOnSubmit: true } );
field2.add( Validate.Acceptance );
var field3 = new LiveValidation( 'field3', {onlyOnSubmit: true } );
field3.add( Validate.Presence );

As you can see above, you no longer need to do anything in order to work with the form itself.


18Sept

Version 1.1 is out!

Support for select elements has been added, which works in exactly the same way as you are used to for inputs and textareas:

Select something:

var mySelect = new LiveValidation('mySelect');
sayHello.add(Validate.Exclusion, { within: ['Please select...'], failureMessage: "Please select something!"});

This update also adds a bit more flexibility to how validations are performed. You now have a couple of extra options when you instantiate a LiveValidation field, ‘onlyOnBlur’, and ‘wait’. Here are some examples:

onlyOnBlur

Setting ’onlyOnBlur‘ to be true will mean the validation will only be run when the field loses focus. When the field is focused, the previous indications of validation, the message element and the validation class on the field, are removed so as not to confuse the user.

Must be filled in:

var myBlur = new LiveValidation('myBlur', {onlyOnBlur: true});
myBlur.add( Validate.Presence );

wait

Setting ’wait‘ to a number (of milliseconds) will mean that the validation will not run until your chosen wait time has elapsed since the last keystroke ocurred. This allows the user to type in their data without it saying it has failed before they have had the chance to finish, by which time it may be valid, but it will still be validated without having to leave the field so they can change it easily. If the wait time is 300ms or more, the validation message and field class are removed when the user starts to type again, in order to avoid confusion.

Required, and at least 10 characters:

var myWait = new LiveValidation('myWait', {wait: 300});
myWait.add( Validate.Presence );
myWait.add( Validate.Length, {minimum: 10} );

So there you go, these new options will give you more control, which is nice because not everyone wants to use it in the same way, now you don’t have to, enjoy!


© 2007-2010 Alec Hill | MIT license

Share / bookmark this page