Correct way for custom HTML attributes
-
22-09-2019 - |
문제
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:
- I don't like using classes. It feels like misuse. Is it OK to use them like this?
- My custom attributes
min
andmax
don't validate.
해결책
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)
다른 팁
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.
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.