Correct way for custom HTML attributes

Question

I am writing custom form validation javascript library and I am thinking about correct markup syntax. Let's say I have an input that requires number between 1 000 and 10 000.

So far, I came up with something like this:

<input class='validate required number' min='1000' max='10000' />

Is this correct way to do it? I have two problems here:

1. I don't like using classes. It feels like misuse. Is it OK to use them like this?
2. My custom attributes min and max don't validate.

Answer 1

It's perfectly fine to use classes like that. In fact, it makes doing things in Javascript and CSS a lot easier.

Custom attributes are not allowed in HTML. The class attribute should be used instead to add custom functionality or style to each tag.

In your case, I would advise adding a class such as "number-1000-10000", and then use Javascript to do the rest.

Answer 2

If you read the jQuery Validation it seems to specify the complicated validation arguments (e.g. max and min values for a field) in JSON format.

Answer 3

Since HTML5 will support this structure, it might be the best way to go:

<input data-validate="very-yes" data-min="1000" data-max="10000"/>

Whereby any "data-..." attribute can be used to store more info. You could also attach this data after using script(s)