jquery.input-group
Adds validation and statuses to structured form groups, compatible with Bootstrap form inputs.
Demo
install with bower
bower install jquery.input-group
or npm
npm install jquery.input-group
jquery.input-group needs a certain html structure minimally as follows
jquery.input-group adds feedback classes and messages to this structure.
feedback message
Within this basic outline jquery.input-group aims to be as flexible as possible, allowing a wide range of structures, and is designed to work with Bootstrap form groups
<!-- twitter bootstrap form group example --> Email
here is an example of the previous bootstrap form group with jquery.input-group's default error markup applied
Email error message
inputGroup
error
, warning
, or success
markup and feedback message will be applied.
; ; ; //if an array is passed, the message will be rendered as an unordered list.;
inputGroup
may be applied to more than one form group at once. If this is
the case, then you may apply error
, warning
, or success
markup as follows.
;
You may also format your statuses like this.
;
You may apply a status to a form group and omit a feedback message, by passing
null
for the message value.
;
;
validate
inputGroup
also takes a validate
callback that will apply statuses on input
blur
;
progressiveValidate
inputGroup also takes a
progressiveValidate` callaback that will apply statuses
on input blur. Statuses will be applied progessively as a user works their way
through a form. Inputs that occur after the blurred input will not be validated.
;
inputGroupClear
clears the select input groups of statuses
;
inputGroupValues
gets the values of named inputs of selected form groups. inputGroupValues
is used by the validate callback to pass validate its values. Radio input groups
return the value of checked radio inputs. Checkbox input groups returns an
array of values of the values of checked checkboxes.
;
inputGroupConfig
jquery.input-group
applies status markup compatible with bootstrap by default.
you may override this markup with your own custom markup.
$;