Implement Unobtrusive Javascript with Parameters

Question

What's your strategy for passing parameters to unobtrusive Javascript?

Say we have three dynamically generated input fields which need to be validated for ranges:

<input id="smallValue" class="validatedRange" />
<input id="mediumValue" class="validatedRange" />
<input id="largeValue" class="validatedRange" />

In the Javascript:

Ext.onReady(function () {
  Ext.select("input.validatedRange").on("change", function () {
    // How to get the min/max values to here?
  }); 
});

Somehow, the min/max values need to be included in the markup. The "best" way I see currently is to abuse the tag like so:

<input id="smallValue" class="validatedRange" min="0" max="10" />
<input id="mediumValue" class="validatedRange" min="100" max="1000" />
<input id="largeValue" class="validatedRange" min="1000" max="10000" />

Do you know of a better way?

Answer 1

I never agree with invalid HTML markup, so i'ma suggest this..

not 100% sure if it would work but it should in theory): look into the jquery validation library for your validation needs (save hand-rolling something!)
http://docs.jquery.com/Plugins/Validation/

this is all done declaratively and is quite a neat way to do things

also you could checkout live query which rebinds events when things are inserted into the DOM dynamically
http://docs.jquery.com/Plugins/livequery

the combo of these two should work. hope that helps

Answer 2

For the purpose of having custom HTML attributes, there are the data-prefixed attributes...

<input id="foo" class="bar" data-min="100" data-max="1000">

This is a new feature of HTML5: http://ejohn.org/blog/html-5-data-attributes/