Thursday, March 12th, 2009

DOMLint: Checking for Form Conflicts

Category: JavaScript, Utility

A few days ago, Prototype developer Juriy Zaytsev announced a new utility, DOMLint. It aims to solve an obscure but important problem with forms and JavaScript:

Form controls, for example, can be accessed by their “name” through property access of <form> element… What happens if we try to access an element whose name matches a function or property of the form?

  1. &lt;form&gt;
  2.   &lt;input type="text" name="submit" value="Submit!"&gt;
  3.   &lt;input type="text" name="style"&gt;
  4. &lt;/form&gt;
  5. ...
  6. &lt;script type="text/javascript"&gt;
  7.   document.forms[0].submit; // "[object HTMLInputElement]"
  8.   document.forms[0].style; // "[object HTMLInputElement]"
  9. &lt;/script&gt;

Just like that, having 2 simple elements with somewhat unfortunate names, we end up not being able to use a very crucial “submit” method, and a not less useful “style” property.

Juriy goes on to demonstrate an even “creepier” example, and then makes his announcement:

This is why I created a simple test suite to catch the offenders. It’s called DOMLint and is powered by a wonderful YQL. It is also hosted on github.

You give DOMLint a URL, and it delivers to you a report on these potential conflicts.

Thanks very much, Juriy!

Posted by Ben Galbraith at 6:00 am

3.6 rating from 17 votes


Comments feed TrackBack URI

Might be able to accomplish this with a few CSS declarations:

input.submit, form.getElementById, etc. {
border: thick solid red;
background: red;

Comment by Jordan1 — March 12, 2009

I’ve tried this against a few sites while using IE7, and it seems to “hang” (that is, never progresses) after then second of the six tests. It works against the same sites while in FF. Strange, since this seems like more of a server side checking that is happening, but maybe I’m misunderstanding exactly how it’s doing it’s magic.

Comment by shadedecho — March 12, 2009

Leave a comment

You must be logged in to post a comment.