This plugin adds some basic html5 form element support to existing web browser including IE6,7,8, Firefox, Google Chrome for Mac, Safari 5 (enhancements).
DEMO: https://gundermann.me/playground/autoform5/
TODO:
- min/max/maxlength support
- ajax form submission option (gotta learn that ajax thing first eh')
- read a full documentation of this plugin
- placeholder
- required
- autofocus
- tel
- number
- url
In addition to adding support for the above things the form is validated on submit, with error classes being applied to failed input elements and live error checking on required fields.
Finally all variables of the plugin are easily definable by passing them into the function as an object:
Defaults:
$('form').autoForm5({
// basic settings and their defaults are
validateForm: true,
requiredFields: '',
interimDataField: 'instructions',
// classes and their defaults
classes : {
form : 'af5-activeform',
fieldset : 'af5-activefieldset',
error : 'af5-error',
required : 'af5-required',
passive : 'af5-passive',
active : 'af5-active',
interim : 'af5-interim',
filled : 'af5-filled'
},
// all regex pattern for the validation are also accessible
pattern : {
tel : /(?!:\A|\s)(?!(\d{1,6}\s+\D)|((\d{1,2}\s+){2,2}))(((\+\d{1,3})|(\(\+\d{1,3}\)))\s*)?((\d{1,6})|(\(\d{1,6}\)))\/?(([ -.]?)\d{1,5}){1,5}((\s*(#|x|(ext))\.?\s*)\d{1,5})?(?!:(\Z|\w|\b\s))/,
email : /^(\w|\.|-)+?@(\w|-)+?\.\w{2,4}($|\.\w{2,4})$/,
number : /^\d+$/,
url : /(https?:\/\/)?(www\.)?([a-zA-Z0-9_%]*)\b\.[a-z]{2,4}(\.[a-z]{2})?((\/[a-zA-Z0-9_%]*)+)?(\.[a-z]*)?/,
text : /./
}
});
Example:
The following will change the 'af5-active' class to 'active' and the 'af5-passive' class to 'inactive'. Also we're adding an input field with an ID of #someinput to the required fields array for validation purposes. By default all fields with the HTML5 required attribute or with a class of 'required' are added to this stack, if for whatever reason you are opposed to adding the attribute or class to the element directly you can specify them here as a comma separated list.
$('form').autoForm5({
requiredFields: '#someinput',
classes : {
active : 'active',
passive: 'inactive'
}
});