If you were using Internet Explorer 6 or 7 on a Windows machine or Opera 9, this demo would actually work!
Date and time types
Range control
Calculated fields
Prefilling forms
Roundtripping data
Input mode


WF2 introduces built-in validation on the client-side.

In this example, the input field is declared "required", which means the form cannot be submitted if the field is empty. Instead an error message will be displayed to the user.

The code looks like this:

  <input name="textfield" type="text" required>
  <button type=submit>Submit me</button>

This field requires a number between 18 and 99:


The code looks like this:

  Age:  <input name="age"  type="number" min="18" max="99" required>
  <button type=submit>Submit me</button>

Here is a sample form using an assortment of the new validation constraints:

(must be an email adress)

(must be an URI)

(must be between 18 and 90)

(decimal, will be rounded to two decimals)

(There are also several date and time related controls, but they are described in a seperate section.)

Custom validation

Of course, the built-in types and constraints cannot cover every use case. Therefore it is possible to hook custom code into the validation system.


The code for the control looks like this:

<input name="num" type="number" onchange="if(isSquareNumber(value)) setCustomValidity('Must be a square number'); else setCustomValidity()">

The method setCustomValidity called with an error message, indicates that the control is not valid. The message will be display, if the user tries to submit the form. If setCustomValidity is called without an argument, the field is considered valid again