4

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?

Marek Sebera
  • 39,650
  • 37
  • 158
  • 244
Friso Kluitenberg
  • 1,157
  • 1
  • 14
  • 34

4 Answers4

7

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 ;-)
mas-designs
  • 7,498
  • 1
  • 31
  • 56
  • In my case (php). By default the attribute key has been lowercased. And the function data() is key sensitive. So when I entered the key name with camelcase convention I could find it by jquery so I had to lowercase any capital letter in the key. – Amr Apr 11 '22 at 14:19
3

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/

Simon Edström
  • 6,461
  • 7
  • 32
  • 52
2

You definitely can. Although HTML5 introduced what's called data- attributes, allowing to set non-standard attributes to elements in a standard way.

You simply prefix the attribute names with data-

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

Although, this is introduced in HTML5, you can still use it with documents for HTML4.

Using jQuery (1.4.3+), the data- attributes can be accessed with .data() - or via .attr().

Didier Ghys
  • 30,396
  • 9
  • 75
  • 81
0

I personally wouldn't do that. Some browsers ignore "non-existing" attributes when parsing HTML, therefore these attributes wouldn't be saved in the browser page DOM. When jQuery selectors are executed, they may not find this attribute.

If you are guaranteed to run in HTML5-compliant browsers, then you can use HTML5 data- prefix for your attributes, e.g.

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

However this still may not work if you run in older browsers. For example, it turns out that almost half of our clients are using IE7 with no plans to upgrade (moving with the speed of government).

Aleks G
  • 56,435
  • 29
  • 168
  • 265
  • 2
    What do you mean ignore? I had never encountered a problem with "non-existing" attributes... and data-* is valid in HTML <5! – gdoron Mar 13 '12 at 12:59
  • I did not state that this will definitely happen. I merely indicated that the behaviour for "non-existing" attributes is not defined for older browsers. – Aleks G Mar 13 '12 at 13:20
  • @gdoron - "data-* is valid in HTML <5". Where did you get that from? – Alohci Mar 13 '12 at 13:39
  • @Alohci. Well... works well in all modern browsers is valid (for me). I don't care about the spec as long as it works, just like with the `type="javascript` can be removed... – gdoron Mar 13 '12 at 13:45
  • @gdoron I specifically said "older browsers". Yet you are saying "modern browsers". Is firefox 3.6 considered "modern" by your standard? It doesn't support it properly. – Aleks G Mar 13 '12 at 13:49