SCR21: Using functions of the Document Object Model (DOM) to add content to a page

This is about:
http://www.w3.org/TR/2007/WD-WCAG20-TECHS-20070517/#SCR21

In Example 1 the paragraph:
> Here is the script that adds the event handlers to the form. If 
> scripting is enabled, the validateNumbers() function will be called to 
> perform client-side validation before the form is submitted to the 
> server. If scripting is not enabled, the form will be immediately 
> submitted to the server and validation will occur on the server.
Should be:
> ...If scripting is not enabled, the form will be immediately submitted 
> to the server and so the validation should also occur on the server.

This could be important as some beginners might thought that the code 
given in the example would also validate the form on server side.


There are also some minor bugs in the code.

I've made the corrected version available here:
http://free.of.pl/n/nux/smp/WCGA_SCR21_ex1.html
The copy&paste version is here:
http://free.of.pl/n/nux/smp/WCGA_SCR21_ex1_pre.html

Summary of changes:
*1. At the end of validateNumbers add:*
   return true;
/[function should always return a value]/

*2. addError is:*
 function addError(strError, strFragment, objForm, strID)
 {
   var objAnchor = document.createElement('a');
   var objListItem = document.createElement('li');
   objAnchor.appendChild(document.createTextNode(strError));
   objAnchor.setAttribute('href', strFragment);
   objAnchor.onclick = function(event){return focusFormField(this, 
event, objForm);};
   objAnchor.onkeypress = function(event){return focusFormField(this, 
event, objForm);};
   // If strID has a value, this is the first error in the list
   if (strID.length > 0)
      objAnchor.setAttribute('id', strID);
      objListItem.appendChild(objAnchor);
      return objListItem;
   }
 }

*addError should be:*
function addError(strError, strFragment, objForm, strID)
{
   var objAnchor = document.createElement('a');
   var objListItem = document.createElement('li');
   objAnchor.appendChild(document.createTextNode(strError));
   objAnchor.setAttribute('href', strFragment);
   objAnchor.onclick = function(event){return focusFormField(this, 
event, objForm);};
   objAnchor.onkeypress = function(event){return focusFormField(this, 
event, objForm);};
   // If strID has a value, this is the first error in the list
   if (strID.length > 0)
      objAnchor.setAttribute('id', strID);
   objListItem.appendChild(objAnchor);
   return objListItem;
}

/[There is a syntax error near the if (strID.length > 0) in the original 
code. I think I've fixed this correctly, but have a look at it]/

I've also changed some indenting, removed action from the form, and 
changed HTML to be XHTML ready ;).

BTW, you could make all examples available on-line as they are in SVG specs.

Oh and I'm not sure what do you mean by this:
> Note that the sample form will not submit. This example only 
> demonstrates the creation of error messages when client side 
> validation fails.
As I see it - the form does got submitted - the values are send to the 
server. So you should either clarify this note or always return false in 
onsubmit. Not to mention that even if the validation function would 
always return false, then with JavaScript disabled the form would still 
get submitted.

Best regards,
Maciej Jaros.

Received on Thursday, 7 June 2007 12:28:34 UTC