Webshims Lib

Polyfill only the incapable browsers

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

* 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.

Options for the forms feature

  • customMessages (boolean): false (default) || true. If customMessages is set to true. Webshims Lib will implement a DOM-Property called customValidationMessage, which can be changed through the $.webshims.validityMessages-Array.
  • overrideMessages (deprecated) (boolean): false (default) || true. Overrides the native messages with the customMessages - using the setCustomValidity-method. This is useful, if you want to use customMessages with native validation UI. If you want to use custom messages with custom styleable UI. Use the customMessages-option instead.
  • 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. If lightweightDatalist 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.
  • positionDatalist (boolean): false (default) || true. If positionDatalist is true or the input element has the class 'position-datalist', the datalist shim element is added right after the input elementand not appended to the body (good for :hover menus).

Options for the forms-ext feature

  • replaceUI (boolean): false (default) || true. If replaceUI is set to true the date and slider 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.
  • slider (options): jQuery UI Slider-Options
  • datepicker (options): jQuery UI Datepicker-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 property invalidlist 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: .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 either set customMessages to true or overrideMessages to true, before calling the polyfill method, to get this new property.
  • attribute: data-errormessage or -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).
  • 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)

Simple Demo

outside of form but associated to the form using form-attribute

* Required fields

date +oninput+ range

Radio-Group Headline Short Labels *

Legend Short Labels *