customMessages/data-errormessage attributeThe used validation message can also be controlled by markup using the data-errormessage attribute.
The value of the data-errormessage attribute is either a simple string containing the errormessage or a valid JSON with different keys representing the different HTML5 validity constraints (["valueMissing", "typeMismatch", "patternMismatch", "customError", "tooLong", "badInput", "rangeUnderflow", "rangeOverflow","stepMismatch"])
In case customMessages or lazyCustomMessages are set to true the data-errormessage as a JSON can be also written as flattened data-errormessage-[dashed-key] attribute.
$.getErrorMessage method.getErrorMessage returns the validationMessage of an invalid form field. As an enhancement to the native validationMessage property the return value can be simpler controlled by the developer. It uses the first possible found message set by a) data-errormessage attribute, b) validityMessages object or last c) native/polyfilled validationMessage property.
$('input').getErrorMessage();
HTML5 constraint form validation implements a very simple UI for form validation. In most cases developers want to enhance this UI. Webshim implementation allows this by using all native form features (noValidate or preventing default behavior of the invalid event), but also gives some pre-build configuration options to implement form validation with a very good user experience and great control over style and behavior.
replaceValidationUI and .user-error/.user-successWith replaceValidationUI set to true the validation bubble of the browser will be replaced with a webshims popover with the additional class validity-alert. Additionally all form fields can be styled using the classes .user-error and .user-success
iValThe instant form validation (iVal = instant validation) feature of webshims is a simple to use but powerfull and UX enhanced feature. Simply put a ws-validate class to your form element:
The instant validation feature can be controlled through the iVal option object. The iVal option has the following defaults.
@@ -218,19 +218,19 @@ Live form validation iVal
webshim.polyfill('forms');
The iVal feature integrates well into different CSS-frameworks like bootstrap or jQuery mobile:
- +iVal.fieldWrapper optioniVal.fieldWrapper defines a selector, which matches the closest ancestor element to a form field and gets the classes ws-invalid (iVal.errorWrapperClass) or ws-success (iVal.successWrapperClass).
iVal.fieldWrapper can be used to group multiple form fields to one "validation group" with one errormessage (i.e.: radio buttons or separated telephone fields) or to control the placement of errormessages.
Grouping multiple form fields to one validation group can be achieved with the following code:
- +iVal.fieldWrapper in conjunction with iVal.errorBoxClass (ws-errorbox) can be also used to place the errormessages.
Normally the ws-errorbox is automatically created and appended to the fieldWrapper. If a ws-errorbox already exists inside of fieldWrapper or is associated with a fieldWrapper using the data-errorbox attribute this ws-errorbox is used.
Among other ways to control errormessages. Forms matching the iVal.sel can have a more descriptive way to define errormessages. Simply by adding one or more child elements to ws-errorbox. The data-errortype can be used to switch between the different error types. The value of the data-errortype attribute is case-sensitive. All standard validity properties als can be written as dashed classes (i.e.: .value-missing is treated as [data-errortype="valueMissing"]).
In case a value was changed, through script the validation UI can be updated by triggering the updatevalidation on the given element:
@@ -276,7 +276,7 @@ dependent
Examples:
-
+
ajaxvalidate
An input with the attribute data-ajaxvalidate referencing a validation service will start an AJAX validation.
@@ -311,9 +311,9 @@ ajaxvalidate
Controlling the errormessages of custom errors
The customError helper hook into the descriptive ways to define errormessage in webshim. Therefore the data-errormessage attribute and in case of the iVal feature the data-errortype can be used to define errormessages for the field.
-
+
For a more general way the JS API can be used to change the errormessage for the given type:
-
+
Creating new customErrors
While webshim allows the developer to use the native or polyfilled setCustomValidity method to add custom errors. Webshims provides two additional ways to add new constraints:
@@ -329,11 +329,11 @@ validatevalue event
});
The validatevalue event is also called while building input widgets like a datepicker:
webshims also exposes the custom error helper to generate new custom constraints
- +In case a script changes a value custom constraints might need to be updated. This can be done either with the updatevalidation or updatecustomvalidity event.
While the controls are fully styleable through CSS, the markup can be controlled by changing the barTemplate option:
Adding new overlays to a mediaplayer, for example to add share buttons (like, twitter), a logo or title and credits for a given video or audio source is easy without writing any JS code.
@@ -257,7 +257,7 @@ Add overlays to the mediaplayer
Here is a simple example creating a title and a social bookmark/share menu:
- +Creating new plugins/controls for the jme mediaplayer is quite easy using the $.jme.registerPlugin method. Due to the fact, that jme is loaded async, the plugin registration has to be wrapped inside a webshim.ready('jme', function(){}); call.
Let's create a control, which jumps the timeline by 10 seconds forward:
@@ -339,7 +339,7 @@Here you find the full featured running example for a JME controlbar plugin:
- +Webshim also comes with some predefined plugins. All plugins can be loaded/activated thourgh the plugins option, which takes an array of plugins to be automatically loaded.
Multi-celled organisms have different types of cells that perform specialised functions. Most life that can be seen with the naked eye is multi-cellular. These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.
- Read original article + Read original article diff --git a/demos/demos/mediaelement/video-bg.html b/demos/demos/mediaelement/video-bg.html index dd2b30db..48ee0919 100644 --- a/demos/demos/mediaelement/video-bg.html +++ b/demos/demos/mediaelement/video-bg.html @@ -68,7 +68,7 @@ - + + + diff --git a/demos/demos/webforms/jquery-mobile.html b/demos/demos/webforms/jquery-mobile.html index d1a20a2b..1babd123 100644 --- a/demos/demos/webforms/jquery-mobile.html +++ b/demos/demos/webforms/jquery-mobile.html @@ -8,7 +8,7 @@ - + diff --git a/demos/index.html b/demos/index.html index 1321f436..478c60a0 100644 --- a/demos/index.html +++ b/demos/index.html @@ -11,7 +11,7 @@ - + @@ -136,7 +136,7 @@- The project is hosted on GitHub, and is available for use under the MIT software license. + The project is hosted on GitHub, and is available for use under the MIT software license.
@@ -156,7 +156,7 @@
- There are many appealing HTML5 features such as form validation, geolocation, mediaelements and UI widgets which ease the burden of writing rich web applications. + There are many appealing HTML5 features such as form validation, geolocation, mediaelements and UI widgets which ease the burden of writing rich web applications.
@@ -692,7 +692,7 @@
The
es5
- feature uses the ES5 shim by Kris Kowal (all object methods, which can't be used cross-browser are removed.).
+ feature uses the ES5 shim by Kris Kowal (all object methods, which can't be used cross-browser are removed.).
The script implements the following methods: @@ -1025,7 +1025,7 @@
default: date time range number
- widgets object widgets is a general options object for all input widgets. example widgets with different themes, example widgets with different configurations
+ widgets object widgets is a general options object for all input widgets. example widgets with different themes, example widgets with different configurations
webshim.setOptions("forms-ext", {
"widgets": {
@@ -1174,7 +1174,7 @@ Canvas
ctx.fillRect(30, 30, 55, 50);
- Webshim Lib can implement excanvas or FlashCanvas/FlashCanvas Pro:
+ Webshim Lib can implement excanvas or FlashCanvas/FlashCanvas Pro:
// always run configuration before calling webshim.polyfill();
@@ -1371,7 +1371,7 @@ Using customstyleable controls
Here you can find more information about customizing controls and extending the mediaplayer's behavior.
Examples/Demos
- - Player with some custom controls using input[type="range"]
+ - Player with some custom controls using input[type="range"]
- responsive/custom styleable Mediaplayer
- full background video
- Controlling the UI of HTML5 mediaelement controls.
@@ -1428,7 +1428,7 @@ Options for the
Examples
- - Working with the TextTrack API
+ - Working with the TextTrack API
- Tree of Life demo (using video, textTrack, datalist/input[list], input[placeholder], input[autofocus] and JSON
@@ -1453,7 +1453,7 @@ Geolocation
- The shim uses the geolocation information provided by http://freegeoip.net and/or googles API-Loader
+ The shim uses the geolocation information provided by http://freegeoip.net and/or googles API-Loader
Options for geolocation
@@ -1531,7 +1531,7 @@ Constraints of the details polyfill
The polyfill currently only allows other elements as direct children of the details. Simple text is not allowed as direct child of details.
- The details and summary element can be considered as experimental. It is not clear wether and if yes, how a developer can style the summary element. Safari nightly (6) and Chrome 12 are currently the only browsers supporting this element. Note: Please read Bruce Lawson's blog post.
+ The details and summary element can be considered as experimental. It is not clear wether and if yes, how a developer can style the summary element. Safari nightly (6) and Chrome 12 are currently the only browsers supporting this element. Note: Please read Bruce Lawson's blog post.
We currently haven't coded unit tests for this feature
@@ -1660,7 +1660,7 @@ usermedia
navigator.getUserMedia. It includes also a polyfill for URL and the srcObj property.
- A demo with code example of getUserMedia polyfill.
+ A demo with code example of getUserMedia polyfill.
url
@@ -1710,7 +1710,7 @@ url
Promise
The promise feature is a polyfill of
- ES6
+ ES6
Promises. For instructions on using promises and details of the API, read
JavaScript
Promises at HTML5Rocks.
@@ -1740,7 +1740,7 @@
Responsive Images
sticky (position: sticky)
- The sticky feature is a polyfill for the CSS position value sticky (position sticky demo).
+ The sticky feature is a polyfill for the CSS position value sticky (position sticky demo).
Descriptive/Markup Usage
Simply add the class ws-sticky to all elements, which should become sticky and define either a top or bottom value:
@@ -1806,7 +1806,7 @@ Webshim's opinionated enhancement cross browser de
Webshim has evolved form a general polyfill library to a sophisticated UI component / UI widget library which makes it easy to create scalable, responsive and highly adaptable websites and webapps.
While webshim polyfills older browsers and automatically fixes a lot of bugs, it enables the developer to also enhance even modern browsers with highly customizable widgets (datepicker, form validation, slider, autosuggest, custom stylable controls for video/audio).
Webshim is opinionated, that a developer should always solve a problem the HTML5 way.
- For example most datepickers have a direct configuration option to disable certain days to be picked from the control. This is not possible with current implementations of input[type="date"], but it is possible to use the HTML 5 form validation API to constrain the user input to certain days. Therefore webshim offers a way to constrain the user input and those constraints are used to decide whether certain days should be disabled in the pickercontrol.
+ For example most datepickers have a direct configuration option to disable certain days to be picked from the control. This is not possible with current implementations of input[type="date"], but it is possible to use the HTML 5 form validation API to constrain the user input to certain days. Therefore webshim offers a way to constrain the user input and those constraints are used to decide whether certain days should be disabled in the pickercontrol.
This way a developer can switch between polyfilled/enhanced and native widgets. While the appearance might be different the base functionality will work in all browsers. But if a certain feature is barley possible with HTML5 or a developer needs full control in all browsers/devices, he can always switch to a enhance all strategy.
Webshim automatically scales your enhancements