Storing Hidden Values in HTML (for tooltip, error, defaults) Best Practices

Question

I just saw this JQuery Metadata Plugin by John Resig, Yehuda Katz, Jarn Zaefferer, and Paul McLanahan, in my search for JQuery Form Validation, and that's an interesting idea!

I'm wondering what general best practices are for storing things like error/validation text, tooltip text, default value text, etc. I know you can place them into the title="My Tooltip Message" attribute, but that would get very messy and wouldn't be DRY if a lot of my items had the same tooltips and errors so to speak.

So is there anything wrong with storing all of that in either hidden input fields or html metadata? Or is there a better way of just storing it all in an XML config file and getting them out via JQuery?

Answer 1

Well, I'd store tooltips in the "title" tag given that that is the supported location for it.

As for other metadata? Depends. Generally I'll store them in made-up properties on the object itself, because this is also supported. Up to personal preference though, IMHO. If I didn't do that, I'd store them in some sort of map in a secondary .js file, but that would get annoying to manage.

Answer 2

You could also store all the things right in JS file - which could be on-the-demand generated by ASP.NET or PHP, so you'll edit all messages in format you like and then just output it as js array or something.

Answer 3

HTML5 supports custom attributes starting with "data-" ex: "data-origvalue" could store the original value of an input which could be used later to determine if the user changed it.

JQuery 1.4 now supports this natively using the .data() functions: http://api.jquery.com/data/

If you're not going to use JQuery, the official best practice recommendation is to use something like "data-LIBRARYNAME-ATTRNAME" ex: "data-jquery-origvalue" so no two libraries will conflict. I suggest you follow this and come up with some unique for the "LIBRARYNAME" part.