invalid-attr
Warn if an attribute is a non-existent attribute or an invalid type value due to the specifications (or the custom rule).
This rule refers the HTML Living Standard based MDN Web docs. It has settings in @markuplint/html-spec
.
❌ Examples of incorrect code for this rule
<div unexist-attr>
<button tabindex="non-integer">The Button</button>
<a href="/" referrerpolicy="invalid-value">The Anchor</a>
</div>
✅ Examples of correct code for this rule
<div>
<button tabindex="0">The Button</button>
<a href="/" referrerpolicy="no-referrer">The Anchor</a>
</div>
This rule doesn't evaluate the element that has the spread attribute in some condition. For example, it disallows to set the target
attribute to the a
element that doesn't have the href
attribute, but markuplint can't evaluate because doesn't know whether the spread attribute includes the href
property.
const Component = (props) => {
return <a target="_blank" {...props}>;
}
Interface
{
"invalid-attr": boolean
}
Options
{
"invalid-attr": {
"options": {
"attrs"?: object
"ignoreAttrNamePrefix"?: string|string[]
"allowToAddPropertiesForPretender"?: boolean
}
}
}
Property | Type | Default Value | Description |
---|---|---|---|
attrs | object | undefined | Setting custom rule. Set either enum , pattern , type or disallowed . |
ignoreAttrNamePrefix | string| | undefined | Set prefixes to exclude special attributes or directives for the library and template engine that do not exist in the HTML specifications. |
allowToAddPropertiesForPretender | boolean | "true" | Allow adding properties for a component that pretends to be an HTML native element. The default is true . It warns of finding a non-existence attribute if it is set false and you use the pretenders option. |
Default Severity
error
Details
Setting attrs
option
enum
Only values that match the enumerated strings are allowed.
Type: string[]
{
"invalid-attr": {
"options": {
"attrs": {
"x-attr": {
"enum": ["value1", "value2", "value3"]
}
}
}
}
}
pattern
Only allow values that match the pattern. It works as a regular expression by enclosing it in /
.
Type: string
{
"invalid-attr": {
"options": {
"attrs": {
"x-attr": {
"pattern": "/[a-z]+/"
}
}
}
}
}
type
Only values that match the specified type are allowed.
Type: string
{
"invalid-attr": {
"options": {
"attrs": {
"x-attr": {
"type": "Boolean"
}
}
}
}
}
disallowed
Disallow the attribute.
Type: boolean
{
"invalid-attr": {
"options": {
"attrs": {
"x-attr": {
"disallowed": true
}
}
}
}
}
Setting ignoreAttrNamePrefix
option
{
"invalid-attr": {
"options": {
"ignoreAttrNamePrefix": [
// If Angular
"app",
"*ng"
]
}
}
}
In some parser, detect an attribute as a directive so ignored. (Ex: Ignore directive that starts v-
string in the vue-parser.)
Configuration Example
The Open Graph protocol and RDFa are specifications that are different from the HTML Standard. So you should specify it manually as follow if you need it:
The Open Graph protocol
{
"nodeRules": [
{
"selector": "meta[property]",
"rules": {
"invalid-attr": {
"options": {
"attrs": {
"property": {
"type": "Any"
},
"content": {
"type": "Any"
}
}
}
}
}
}
]
}
RDFa (RDFa lite)
{
"rules": {
"invalid-attr": {
"options": {
"attrs": {
"vocab": {
"type": "URL"
},
"typeof": {
"type": "Any"
},
"property": {
"type": "Any"
},
"resource": {
"type": "Any"
},
"prefix": {
"type": "Any"
}
}
}
}
}
}
We recommend you use Microdata instead of RDFa if you need structured data.