Validation message span not positioning correctly when input is nested in anchor tag

[Jon]

Why doesn't this work? The invalid message span is moved to be a sibling of the input element. Shouldn't it remain outside the anchor tag?

I've created a jsbin here.

Thanks,
Jon

[Jon]

Just found it. Apparently, the data-for attribute should be set to the input element's name not the id.

It even says so here.