data-* Attribute Naming Validator
Validates a namespace-less DOM data-* attribute local name and derives its dataset property name. Supply the DOM name after any HTML parser lowercasing.
Description
Custom data attributes store application values on DOM elements.
Custom data attributes store application values on DOM elements. Dataset property names convert hyphens before ASCII lowercase letters into camel case.1
Validates a namespace-less DOM data-* attribute local name and derives its dataset property name. Supply the DOM name after any HTML parser lowercasing.
When to use data-* Attribute Naming Validator
Use this for the following task: Validates a namespace-less DOM data-* attribute local name and derives its dataset property name. Supply the DOM name after any HTML parser lowercasing.
Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
How to use data-* Attribute Naming Validator and understand its results
- Prepare the parsed attribute values, element states or ordered local lists requested below. Keep attribute presence separate from value.
- Enter name using the field table, then run the tool.
- Read valid, datasetKey. Interpret flags, units, ordering and placeholder values using the rules below.
- Review any reported issue or failed check, correct the supplied values when appropriate, and verify the result in its intended context.
| Input field | Meaning | Value type and bounds | Requirement |
|---|---|---|---|
| name | Name | string; maximum text length 1000 | Required |
Supply a namespace-less DOM local name after parser lowercasing. Require a nonempty data- suffix and reject uppercase ASCII, null, ASCII whitespace and the listed forbidden local-name characters. Return an empty key for invalid names.2
datasetKey = data- suffix with -a through -z converted to uppercase letters This summarizes the declared operation. Units, indexing, inclusivity and exceptional cases are explained in the surrounding text.
| Output field | Meaning | Value type |
|---|---|---|
| valid | Valid | boolean |
| datasetKey | Dataset Key | string |
{
"input": {
"name": "data-user-id"
},
"output": {
"valid": true,
"datasetKey": "userId"
}
}Limitations and assumptions
This does not parse source markup, validate namespaces or test JavaScript property access.
This evaluates supplied local information; it does not fetch a page or run a browser. Malformed requests produce input errors. A successfully evaluated request can still contain false flags, empty result lists or a result outside the supplied threshold; those outcomes have the meanings stated above.
Alternative or Complementary methods
Choose Custom Element Dash-Name Requirement for this operation: Validates custom-element names using the current HTML and DOM local-name rules: initial ASCII lowercase, a dash, no ASCII uppercase or forbidden local-name characters, and no reserved SVG/MathML names. This does not check registry availability. For a complementary task, use template Inert Content Note for this operation: Classifies ordinary template DocumentFragment contents versus content already inserted into a document or a processed declarative shadow root. Only ordinary template contents remain in the inert template owner document; other reasons for inertness are not evaluated.
Further background: HTML / accessibility reference: data-* Attribute Naming Validator.
References
Similar or alternative tools
- Custom Element Dash-Name Requirement
Validates custom-element names using the current HTML and DOM local-name rules: initial ASCII lowercase, a dash, no ASCII uppercase or forbidden local-name characters, and no reserved SVG/MathML names. This does not check registry availability.
- template Inert Content Note
Classifies ordinary template DocumentFragment contents versus content already inserted into a document or a processed declarative shadow root. Only ordinary template contents remain in the inert template owner document; other reasons for inertness are not evaluated.