HTML5 forms/Web Forms 2.0 widgets and constraint validation API : webshims lib - the polyfilling capability based loading JS library

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

show/hide forms-ext features

elements: output, datalist* (currently not for date, number and range type)
types: email, url, time, date, number, 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: willValidate, validity, validationMessage, valueAsNumber, valueAsDate
methods: setCustomValidity, checkValidity
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)

* 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

E-Mail + datalist: *

date: *

required checkbox*

* Required fields

number: *

range:

Time:

password:

textarea: * ([maxlength="6"])

select: *

number + number = output:

date +oninput+ range

Radio-Group Headline Short Labels *

Legend Short Labels *

Radiooption 2

Radiooption 3

How to...

Customized Demos / Code Snippets / Tutorials

... create custom stylable error messages

Creating custom stylable error messages is simple (You won't see a difference in polyfilled browsers):


/*bind to the first invalid element in a form*/
$('section.forms-demo').bind('firstinvalid.example1', function(e){ 
	/*show the invalid alert for first invalid element*/
	$.webshims.validityAlert.showFor( e.target ); 
	/*prevent browser from showing native validation message */
	return false; 
});

/*unbind event binding from second/next example:*/
$('section.forms-demo').unbind('firstinvalid.example2');

The validityAlert method will create the following custom styleable HTML:


<!-- note: span.validity-alert-wrapper is label.validity-alert in old browser, which do not support WAI-ARIA -->
<span class="validity-alert-wrapper" role="alert">
	<span class="validity-alert">
		<span class="va-arrow"><span class="va-arrow-box"></span></span>
		<span class="va-box">Error message of the current field</span>
	</span>
</span>

Using custom messages instead of native browser messages is also easy. Simply implement the customValidationMessage attribute and use it.


/*configure webshims to implement new customValidationMessage attribute
$.webshims.setOptions('forms', {
	customMessages: true
});*/

/* load all polyfill features
 $.webshims.polyfill();*/

/* wait for DOM-Ready */
$(function(){
	/*bind to the first invalid element in a form*/
	$('section.forms-demo').bind('firstinvalid.example2', function(e){ 
		/* show the invalid alert for first invalid element and pass the custom validation message */
		$.webshims.validityAlert.showFor( e.target, $(e.target).prop('customValidationMessage') ); 
		/* prevent browser from showing native validation message */
		return false; 
	});
});


/*unbind event binding from first example:*/
$('section.forms-demo').unbind('firstinvalid.example1');

Instead of binding to the events your own, you can also simply set the configuration option replaceValidationUI to true:


//$.webshims.setOptions('forms', {
// 	//Use customizeable validation messages
//	customMessages: true,
//	//replace validation UI in all browsers
//	replaceValidationUI: true
//});

//load all polyfill features
//$.webshims.polyfill();

or use the content attribute API


<label for="name">Name:</label>
<input id="name" required data-errormessage="Please tell us your Name" />
<!-- or -->
<label for="name">Name:</label>
<input id="name" required -x-moz-errormessage="Please tell us your Name" />

Note: We want you to learn how this works in HTML5. Instead of simply configuring and using our extensions, you can implement your own validation UI with a totally unique look and feel on top of the HTML5 standard. As a simple start you have to remove the browsers validation UI, which can be achieved by preventing the default behavior of an invalid event.


$('form').bind('invalid', function(e){
	//implement your validation UI here!!!
	e.preventDefault();
});

More information about custom error messages/custom error bubbles (also explains how to change the built-in text).

Simply change some configuration and you are ready.


/*configure webshims to use JS-Widgets instead of native widgets*/
$.webshims.setOptions('forms-ext', {
	replaceUI: true
});

Loading jQuery UI from another source:


/*load a customized jquery ui build from another source */
$.webshims.modules["jquery-ui"].src = "../jquery-ui.custom.min.js";

Loading 'forms-ext' conditionally (for performance)


/*load a customized and more lightweight jquery ui build from another source */
$.webshims.modules["jquery-ui"].src = "../jquery-ui.custom.min.js";

/*add forms to the features list*/
var features = ['forms'];

/* only add forms-ext, if input[type="range"] is not supported */
if( !Modernizr.inputtypes.range ){
	features.push('forms-ext');
}

/* Load all features */
$.webshims.polyfill(features);

More information about custom styleable input widgets.

There are several solution. You can try to use the pattern attribute...


<input pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters." />

... and for more complex constraint simply use the setCustomValidity-method:


	var testValidity = function(){
		if( hasError ) {
			$(this).setCustomValidity('This field has an error');
		} else {
			$(this).setCustomValidity('');
		}
	};

More information about custom validation constraints.