HTML5 forms
Demo/About/Documentation of HTML5 constraint validation API
The forms
(constraint validation without number, date etc.) and forms-ext
(number, date, range etc.) features of the webshim lib are implementing support for the constraint validation API, some input widgets and the placeholder-attribute.
The forms
feature also implements an easy and cross browser way to control the validation UI (error message and styling the validation bubble).
Implemented/fixed elements, attributes, properties, methods, events
- elements: output, datalist1, progress
- types: email, url, time, date, number, month, range
- content attributes and properties (IDL attributes): placeholder, list, autofocus, novalidate (noValidate), required, pattern, maxlength, formnovalidate (formNoValidate), formaction (formAction), formenctype (formEnctype), formmethod (formMethod), formtarget (formTarget), form attribute, step, max, min
- properties/IDLs: options2, selectedOption2, position, willValidate, validity, validationMessage, position, valueAsNumber, valueAsDate, labels
- methods: setCustomValidity, checkValidity, stepUp/stepDown
- events: invalid, input
- Selectors: :invalid, :valid, :required, :user-error (Not for CSS, only for JS, for CSS use selectors .user-sccuess, .user-error or [required] please look into the abstractions section)
- 1. You need to wrap the datalist options in a select element (datalist > select > option)! / datalist can be also switched to the
forms-ext
feature using the lightweightDatalist option. - 2. Only if customDatalist option is set to true.
Options for the forms
feature
- customMessages (boolean):
false
(default) ||true
. IfcustomMessages
is set to true. Webshims Lib will implement a DOM-Property called customValidationMessage, which can be changed through the $.webshims.validityMessages-Array. - replaceValidationUI (boolean):
false
(default) ||true
. Replaces the browser validation UI with a custom styleable UI. - placeholderType (string):
"value"
(default) ||"over"
. If placeholderType is set to "over", the polyfill uses the overLabel technique to create a placeholder and doesn't "pollute" the value property. - lightweightDatalist (boolean):
true
(default) ||false
. IflightweightDatalist
is set to true. Webshims Lib will switch the datalist element and list property implementation from the forms-ext to the forms feature. - customDatalist (boolean):
false
(default) ||true
. Allows to use custom styleable datalist elements in all browsers. - overridePlaceholder (boolean):
- iVal (mixed options): options for the Instant/Live form validation feature (see)
- addValidators (boolean):
false
(default) ||true
: Should Webshims implement some new custom validators. see: custom validity
Options for the forms-ext
feature
- replaceUI (boolean):
false
(default) ||true
. If replaceUI is set to true the number, time, month, date and range Widgets are replaced in all browsers (also in browser, which have implemented these types). This is useful, if you want to style the UI in all browsers. - types (string):
'range date time number month'
. A white space seperated string. Possible values are: range date time number month color (Note: color is left out from the default string). If one of the listed input types is not supported. Webshims will load the forms-ext API and UI package and implement all types. - widgets (options): widgets is a general options object for all input options. For more information see here
- date (options): for more information see here
- month (options): for more information see here
- number (options): for more information see here
- time (options): for more information see here
- range (options): for more information see here
- color (options):
Extensions/Abstractions to the standard
- event: firstinvalid:
firstinvalid
is a simple, bubbling event, which is triggered on the first invalid form element. Preventing the default of firstinvalid will automatically prevent the default behavior of all current invalid elements. - event: lastinvalid:
lastinvalid
is an extended, bubbling, (but) uncancelable event, which is triggered on the last invalid form element. The propertyinvalidlist
is a jQuery-collection of all current invalid elements. - event: changedvalid/changedinvalid: Event is triggered, if the value of the element was changed and is marked as valid/invalid (see also: .form-ui-valid/.form-ui-invalid).
- event: datalistselect: Event is triggered on the input element, if the user selects a value from an option inside of the associated datalist (only available, if customDatalist is set to true)
- selectors for CSS/JS: .ws-instantvalidation (.ws-invalid/.ws-cussess): The class 'ws-instantvalidation' on a form element will implement UX improved Instant Validation for this form. The classes .ws-invalid (similiar to :user-error) and .ws-success will mark either "touched" invalid element wrappers or valid and "filled" element wrappers. see also
- selectors for CSS/JS: .user-success/.user-error: which work similar to :-moz-ui-valid/:-moz-ui-invalid or :user-error
- selectors for CSS/JS: .placeholder-visible: which work similar to :-moz-placeholder, :-ms-input-placeholder and ::-webkit-input-placeholder
- selectors for CSS: .prop-checked: which work equal to :checked pseudoclass. This class is only added, if the browser does not support the
:checked
pseudoclass (i.e. IE8-). - property: customValidationMessage: very similar to the standard validationMessage, but always uses built-in custom validation messages, which can be better controlled. Note: You have to set
customMessages
to true before calling thepolyfill
method, to get this new property. - attribute: data-errormessage or -x-moz-errormessage: Attribute with text, which is used be custom validityAlert/customValidationMessage to show a custom error message for the field.
- attribute/class: search-start: If an input[list] has the class
search-start
the value of the datalist options have to match from start (only available, if customDatalist is set to true). - attribute/class: mark-option-text: If an input[list] has the class
mark-option-text
the matched value/label string of the datalist options will be marked. - helper method: $.webshims.validityAlert.showFor: takes a DOM-Object/Selector/jQuery-Object and shows the invalid message for this element. (simply look into the prototype i.e.
console.log($.webshims.validityAlert)
to make changes)