WebAIM - Web Accessibility In Mind

E-mail List Archives

Accessible dynamic help tooltip and inline form field validation is now available

for

From: Bryan Garaventa
Date: Jan 28, 2013 8:24PM

Hi,
In case it's of interest, I've completed the Dynamic Help Tooltip and Inline Form Field Validation module, which is demoed at
http://whatsock.com/modules/form_validator_module/demo.htm

The Form Field Validator Module dynamically handles inline form field validation for customizable error and help tooltips.

This isn't just a demo though, but rather, is a scalable module that can be configured for any type of form layout with customizable help and error tooltips that can be restyled and programmatically updated based on user input.

To test the versatility of this, I deliberately made the form complicated using embedded layout tables, which also shows how each error tooltip can be individually configured to best fit the form structure and the field that it relates to.

You can see how this is done by viewing the code for the setup script, at
http://whatsock.com/modules/form_validator_module/js/setup.js

The object declarations that are passed to the function, simply match the ID attributes of the required form fields to be validated, which are then configured based on the settings configured within these objects.

For example, additional functionality can be added to each tooltip object by adding properties and methods to the 'overrides' object declaration.

So, if you wanted to add another script process to be run every time a tooltip opens and closes, all you would need do is the following:

// Add runAfter and runAfterClose functions to the overrides object (as seen in 'setup.js')

overrides: {
runAfter: function(dc){
// Do something every time this tooltip opens
},
runAfterClose: function(dc){
// Do something every time this tooltip closes
}
}

This functionality takes advantage of the new Function Cascading feature, documented at
http://lnkd.in/HgDgJg
which allows for the cascading of flow control methods for layered functionality.

The code for the module itself, can be seen at
http://whatsock.com/modules/form_validator_module/js/form_field_validator.js

Which has also been added to the accessible component libraries on GitHub, at
https://github.com/accdc/accdc
And for jQuery at
https://github.com/accdc/accdc-jquery

All the best,
Bryan