Web Forms 2.0 - validation expressions

This is part of a suite of test forms for Web Forms 2.0 for a set of shared examples with XForms Transitional. See the corresponding XForms Transitional example. This demo will only work on a Web Forms 2.0 compliant browser (e.g. Opera 9).

Here is the markup for the above form:

<script type="text/javascript">
function validate()
{
  var x = document.getElementById('f1');
  var y = document.getElementById('f2');

  y.setCustomValidity(eval(x.value) < eval(y.value) ?
                      "" : "y must be greater than x");
}
</script>

<form name="form1" onforminput="validate()">
<fieldset>
<legend>Validation expressions</legend>
<label for="f1" title="must be a number">X</label>
<input id="f1" name="x" type="number">
<label for="f2" title="must be a number greater than x">Y</label>
<input id="f2" name="y" type="number">
</fieldset>
</form>

A quick test with an alert box reveals that onforminputevent is raised twice whenever a field value is changed. Once would seem more reasonable. If you want a tooltip to appear when you hover the pointer over either the field or the label, then Web Forms 2.0 requires you to set the title attribute on both elements. XForms Transitional will copy the title attribute in either direction, saving you the author time and effort.

By way of contrast the XForms Transitional markup for this example is the following:

<form name="form1" onsubmit="false">
<fieldset>
<legend>Validation expressions</legend>
<label for="f1" title="must be a number">X</label>
<input id="f1" name="x" type="number">
<label for="f2" title="must be a number greater than x">Y</label>
<input id="f2" name="y" type="number" constraint="y > x">
</fieldset>
</form>

Dave Raggett <dsr@w3.org>