Skip to content
Flint
Blog

anchorValidity

Reports invalid usage of anchor elements.

✅ This rule is included in the jsx logical and logicalStrict presets.

The HTML <a> (“anchor”) element represents a link to some place on the current page or another page. If an <a> does not have a valid href attribute than it is not a valid anchor.

Invalid anchors are most commonly seen when developers use an <a> with an onClick, rather than the more semantic <button>. Anchor elements should only be used for navigation, not triggering modifications to the current page.

Examples

Section titled “Examples”
CE<6asp ansty="le--0:#7FDB">CA d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0hrA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0hrA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Djavascript:void(<0)sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0onCliA3<4{sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--1:#8844">CEA<=>sp ansty="le--0:#7FDB">CA sp><{}sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0hrA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0onCliA3<4{sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--1:#8844">CEA<=>sp ansty="le--0:#7FDB">CA sp><{}sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dhttps://example<.com spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D/1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D#sec1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--1:#88"><44AE spans="tyle--0:#7F">D92 spans="tyle--0:#7F">DBC>3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dhttps://example<.com spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--1:#88"><44AE spans="tyle--0:#7F">D92 spans="tyle--0:#7F">DBC>3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di>

When Not To Use It

Section titled “When Not To Use It”

If you use a framework that automatically populates anchors with proper href attributes, then you can disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”