Demo/About/Documentation of HTML5 constraint validation API
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.
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-extfeature using the lightweightDatalist option.
- 2. Only if customDatalist option is set to true.
Options for the
- customMessages (boolean):
customMessagesis set to true. Webshims Lib will implement a DOM-Property called customValidationMessage, which can be changed through the $.webshims.validityMessages-Array.
- replaceValidationUI (boolean):
true. Replaces the browser validation UI with a custom styleable UI.
- placeholderType (string):
"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):
lightweightDatalistis set to true. Webshims Lib will switch the datalist element and list property implementation from the forms-ext to the forms feature.
- customDatalist (boolean):
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):
true: Should Webshims implement some new custom validators. see: custom validity
Options for the
- replaceUI (boolean):
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
Extensions/Abstractions to the standard
- event: firstinvalid:
firstinvalidis 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:
lastinvalidis an extended, bubbling, (but) uncancelable event, which is triggered on the last invalid form element. The property
invalidlistis 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
:checkedpseudoclass (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
customMessagesto true before calling the
polyfillmethod, 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-startthe 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-textthe 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)