FormValidator gets a makeover
A while ago I authored a FormValidator class for Mootools and I just spent a few hours adding a lot more functionality to it. In a nutshell:
- Warnings - you can now author warnings for the user that won’t prevent the form from being submitted.
- Ignore Fields - if the context changes, you can ignore entire fields (for instance, if they are hidden)
- Stop/Start - you can toggle the validator on and off.
- Serialization - by default only one error is shown unless the user explicitly changes a value. This means that if a user tabs past a required field and it produces an error, when they back up to fill in that field, the field they just tabbed into won’t produce an error. If the user actually changes a value, the validation will produce an error if the field fails validation, regardless of the state of other errors. This is all configurable, and is just there to make the form a little less annoying.
- Instance Validators - previously, the only way to add a Validator was to add it to all the instances of FormValidator. Now you can add instance-specific validators. You can also extend FormValidator and add validators to all its instances. This way, you can add global validators (FormValidator.add), semi-global validators for Classes based on FormValidator (MyFormValidator.add) and specific instance validators (thisFormsValidator.add).
You can see this in action in the Wikitorial and dig into the options in the docs.
May 6th, 2007 at 8:09 pm
A mootools based form validator is something I’ve been looking for, for a while now and I know all the cnet libraries are great. Unfortunately they don’t seem to work for me in Safari 2.0.4 or a newer build of Webkit by giving me a long list of variables it cannot find the the debugger. It works beautifully in Firefox however.
Just letting you know and I look forward to using this in the future.
May 7th, 2007 at 7:30 am
I think Mootools 1.1 (due out imminently) fixes a lot of support for the most recent build of safari. I’ll wait until after it’s out to see if I need to refactor my stuff.
May 27th, 2007 at 9:33 pm
Didn’t see anything in the change log. Does this work on Safari yet?
May 28th, 2007 at 8:57 am
It should… here’s a simple test for you to try:
http://clientside.cnet.com/temp/formvalidator.js.html
February 27th, 2008 at 11:18 am
This doesn’t seem to work for required radio buttons (say, requiring that one in a group of radio buttons be chosen).
Am I missing something?
February 27th, 2008 at 11:19 am
can you post a url to an example that isn’t working for you?
February 27th, 2008 at 11:39 am
Many apologies. I missed that the class needs to be “validate-one-require” rather than “required”.
February 27th, 2008 at 3:57 pm
I might have found a bug, though. Try it on your test form (referenced above):
Cause the Sex radio group to fail validation, then select the radio for female. The advice doesn’t hide - guessing that the group isn’t re-validated as a whole because that specific radio is missing class=”validate-one-require”.
It works correctly if you select the radio for Male.
February 27th, 2008 at 5:16 pm
Good point. I don’t think that’s really a bug though; as you can just add the class to each of the inputs. Still, it’s a good point; if I have some time I’ll try and address it in our next release.