Non existing Attributes HTML Input Field

Question

Is it good practice to attach an non existing attribute to an html element in order to use it in jquery. For example

<input type="text" valrule="someregexstring" />

then simply use jquery to select all elements which contain an attribute called valrule and parse the regex string.

Is this a 'no-go' as far as programming standards and best practices go?

Answer 1

You should use the prefix data-<myAttribute>. It is supported by HTML5, other browsers will ignore it and you can access it easily with jQuery using the .data() method.

<input  id="myInput" type="text" data-MySuperMassiveAttribute="Awesome"/>

and you can retrieve that information like so :

var howAmI = $('#myInput').data('MySuperMassiveAttribute');
alert(howAmI); // now everybody knows how awesome you are ;-)

Answer 2

Use HTML5 data- prefix for new attribute like this:

<input type="text" data-valrule="someregexstring" />

Its valid HTML 5..

http://ejohn.org/blog/html-5-data-attributes/