Web Forms 2.0 - required fields

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(x.value != "" && y.value == "" ?
                      "y must be greater than x" : "");
}
</script>

<form name="form1" onsubmit="validate()">
<fieldset>
<legend>Conditionally required field</legend>
<label for="f1" title="optional">X</label>
<input id="f1" name="x" type="text">
<label for="f2" title="required if x is filled out">Y</label>
<input id="f2" name="y" type="text">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>

Opera gives a rather clumsy error report when you try to submit the form and something is invalid. It would be nice to have greater control over that.

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

<form name="form1">
<fieldset>
<legend>Conditionally required field</legend>
<label for="f1" title="optional">X</label>
<input id="f1" name="x" type="text"/>
<label for="f2" title="required if x is filled out">Y</label>
<input id="f2" name="y" type="text" required="x != ''"/>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>

Dave Raggett <dsr@w3.org>