Form

Advanced form controller and API. Grants full control of the HTML form elements.

Full type validation, and event callbacks for any user interaction.

Helper methods to customize form design and interaction responses.

Util.Form is based on the Templator HTML Form syntax, ensuring full HTML fallback when no JavaScript is available.

Functions

Util.Form.init

Definition

Name
Util.Form.init
Shorthand
u.f.init
Syntax
Void = Util.Form.init( Node form );

Description

Initialize form, extending it with realtime validation, state classes and event callbacks. An initialized form consists of a form, fields (inputs etc.) and actions (buttons), and provides some collections to help you access any form component with ease.

Can also be used on partial form, if wrapping node is passed instead of outer form. This makes it extra useful in frameworks which dictate a global form element (like .NET).

"focus", "error" and "correct" classes are added/removed from field and input when state changes.

Form
form.fields
Collection of fields in form.
form.actions
Collection of named actions in form.
Field
field._input
Reference to field input/inputs
field._hint
Reference to field hint
field._error
Reference to field error
Input
input._label
Reference to input label
input.field
Reference to input field
input.val(optional value)
Function to get/set input value. Works with all types of fields. If value is passed, value will be set. If no value is passed, current value will be returned.
Action
action._input
Reference to action input/a

Util.Form comes with a range of default field types:

string
Input type="text". Must be string. Optional min:length, max:length and pattern:regexp classes to specify min and max length and pattern of string.
text
Textarea. Must be string. Optional min:length, max:length and pattern:regexp classes to specify min and max length and pattern of string.
email
Input type="email". Must be valid email syntax.
password
Input type="password". Must be between 8 and 20 chars. Optional min:length, max:length and pattern:regexp classes to specify min and max length and pattern of string.
numeric
Input type="number". Must be numeric. Optional min:length, max:length and pattern:regexp classes to specify min and max length and pattern of string.
integer
Input type="number". Must be integer. Optional min:length, max:length and pattern:regexp classes to specify min and max length and pattern of string.
tel
Input type="number". Must be telephone (.-+ 0-9) and between 5 and 16 chars.
select
Select field with options.
checkbox
Input type="checkbox".
radio_buttons
Input type="radio".

Can be extended with custom input-initializations and -validations as well as custom ways of sending data.

Parameters

form
Node Form to initialize

Returns

Void

Callbacks

form.focused(input)
when form gets focus
form.blurred(input)
when form loses focus
form.updated(input)
when form is updated
form.changed(input)
when form is changed
form.submitted(input)
when form is submitted - if callback function is not declared, form will be submitted as regular HTML form.
form.validationFailed(JSON errors)
when form validation fails - sends errors object, containing names of all failed inputs
form.validationPassed()
when form validation is passed - form contains no errors
input.updated
when input is updated
input.changed
when input is changed
input.focused
when input gets focus
input.blurred
when input loses focus
input.validationFailed
when input failes validation
action.focused
when action gets focus
action.blurred
when action loses focus

Examples

<form name="test_form" action="action" method="get"> <fieldset> <div class="field string required"> <label for="input_id">String, required</label> <input type="text" name="string_required" id="input_id" /> </div> </fieldset> <ul class="actions"> <li><input type="submit" value="submit, name" name="submit_name" class="button" /></li> </ul> </form> <script> var form = u.querySelector("form"); u.f.init(form); form.changed = function() { // callback for form changed } // returns input value form.fields["string_required"]._input.val(); // set input value to "test" form.fields["string_required"]._input.val("test"); form.fields["string_required"]._input.updated = function() { // callback for input value updated } form.actions["submit_name"].focused = function() { // callback for button focus } form.submitted = function() { // callback for form submit } form.validationFailed = function(errors) { // callback for failed form validation } form.validationPassed = function() { // callback for passed form validation } </script>

Uses

JavaScript
  • typeof
  • String.replace
  • String.match
  • Switch ... case
  • parseInt
  • Event.keyCode
  • document.parentNode
  • document.setAttribute
Manipulator
  • Util.browser
  • Util.querySelector
  • Util.querySelectorAll
  • Util.appendElement
  • Util.hasClass
  • Util.addClass
  • Util.removeClass
  • Util.applyStyle
  • Util.getComputedStyle
  • Util.clickableElement
  • Util.Event.kill
  • Util.Event.addEvent

Util.Form.getParams

Definition

Name
Util.Form.getParams
Syntax
Mixed = Util.Form.getParams( Node form [, JSON _options ] );

Description

Get name/value pairs from all inputs in form.

Parameters

form
Node node to use as form scope. Can be form or just plain HTML node.
_options
JSON Optional, JSON _options
Options
send_as
Define type of returned object. Default to regular GET string. Optional formdata, JSON, Object or custom type offered through u.f.customSend[send_as].
ignore_inputs
Input classes to be ignored when collecting data

Returns

Mixed Default GET string, otherwise object as specified in send_as setting.

Examples

<form name="test_form" action="action" method="get"> <fieldset> <div class="field string required"> <label for="input1_id">String, required</label> <input type="text" name="string_required" id="input1_id" value="test1" /> </div> <div class="field string required"> <label for="input2_id">String, required</label> <input type="text" name="string_not_required" id="input2_id" value="test2" /> </div> </fieldset> </form> <script> var form = u.querySelector("form"); u.f.getParams(form); </script>

Returns string_required=test1&string_not_required=test2

Uses

JavaScript
  • typeof
  • Switch ... case
  • encodeURIComponent
Manipulator
  • Util.querySelectorAll
  • Util.hasClass

Files

Main file

  • u-form.js

Segment support files

  • none

Segment dependencies

desktop_edge
u-form.js
desktop_ie11
u-form.js
desktop
u-form.js
desktop_ie10
u-form.js
desktop_ie9
u-form.js
desktop_light
u-form.js
tablet
u-form.js
tablet_light
u-form.js
smartphone
u-form.js
mobile
not tested
mobile_light
not tested
tv
u-form.js
seo
not supported