Skip to main content

no-invalid-attr-value

Warn if an attribute's value doesn't match the type or pattern the specification (or the custom rule) requires.

This rule according to HTML Living Standard. It has settings in @markuplint/html-spec.

Whether the attribute name is known and applicable at all is no-unknown-attr's and no-disallowed-attr's concern; this rule only checks the value of an attribute both of those already accept.

❌ Examples of incorrect code for this rule

<button tabindex="non-integer">The Button</button> <a href="/" referrerpolicy="invalid-value">The Anchor</a>

✅ Examples of correct code for this rule

<button tabindex="0">The Button</button> <a href="/" referrerpolicy="no-referrer">The Anchor</a>
note

This rule doesn't evaluate the element that has the spread attribute in some condition, mirroring no-disallowed-attr's note on the same subject — dynamic (template-interpolated) values are never reported as invalid, since their content isn't known at lint time.

Interface​

{
  "no-invalid-attr-value": boolean
}

Options​

{
  "no-invalid-attr-value": {
    "options": {
      "allowAttrs"?: (string | Attr)[] | Record&lt;string, AttributeType | Pattern&gt;
    }
  }
}
type Attr = {
  name: string;
  value: AttributeType | Pattern;
}

type Pattern = { pattern: string; };

AttributeType is The type API. Pattern is also part of the type API.

PropertyTypeDefault ValueDescription
allowAttrs(string | Attr)[] | Record<string, AttributeType | Pattern>undefinedSpecify the value type or pattern for attribute names not defined by the spec — this is the same option no-unknown-attr accepts; set it identically on both rules when you extend what an element accepts.

Default Severity​

error

Details​

Attribute names are compared as the DOM compares them, which depends on the syntax and on the element: TYPE is type in the HTML syntax. See Attribute name case for the details. The names in allowAttrs are compared the same way.

Setting allowAttrs option​

Shares its shape with no-unknown-attr's option of the same name. This rule uses the value type/pattern given there to validate the attribute's value; set the same allowAttrs on both rules so the two stay in sync.

Configuration Example​

RDFa (RDFa lite)​

vocab's value is a URL, so it is checked by this rule once no-unknown-attr allows the attribute:

{
  "rules": {
    "no-invalid-attr-value": {
      "options": {
        "allowAttrs": [
          {
            "name": "vocab",
            "value": "URL"
          }
        ]
      }
    }
  }
}