[everdimension]

That's exactly the case where the "customValidity" attribute shines!

I have nothing against regex and the "pattern" attribute is the way to go for many cases, but having this is an alternative is also very nice:

const valid = value.length => 4 && isAlphanumeric(value); return ( <Input value={value} customValidity={valid ? 'at least 4 alpha characters' : ''} /> )

[kaoD]

AFAIK customValidity is not an attribute and you can only use an imperative setCustomValidity API which is terrible cumbersome to use in a declarative framework like React.

[everdimension]

Yeah this is exactly what I'm writing about in the article :)

[everdimension]

Yeah well I promise it does read nicely when there's formatting which HN comments do not allow :)