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

Property	Type	Default Value	Description
attrs	object	undefined	Setting custom rule. Set either enum, pattern, type or disallowed.
ignoreAttrNamePrefix	string|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.