Skip to main content

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>
note

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
}
}
}
PropertyTypeDefault ValueDescription
attrsobjectundefinedSetting custom rule. Set either enum, pattern, type or disallowed.
ignoreAttrNamePrefixstring|string[]undefinedSet prefixes to exclude special attributes or directives for the library and template engine that do not exist in the HTML specifications.
allowToAddPropertiesForPretenderboolean"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.