How to mark errors only if at least one none error field exists.
want to mark all blocks that have an non empty error attribute.
But only if there is a block later that has an empty error attribute. (essentially detecting that the user has skipped a block)
My current solution is add the marking to all blocks with non-empty error and then remove it if there is a previous sibling that has no error.
It works if there is a block that has an empty error attribute but if there isn't one all blocks get marked so when a user opens the form all fields are marked as errors until he fills in the first block.
So i need a way to not mark blocks when all of the blocks aren't filled yet.
While i could force the markings to be removed with JS I would prefer a CSS-only solution.
CodePen with the Problem.
https://codepen.io/Aradiv/pen/mdZqOyB
So in the left column no block should be marked.
In the right column only the first 2 blocks should be marked. (works)
The HTML can't be changed
1 Reply
Okay after writing down the Problem and getting a new coffee i found the solution.
removes the marking on all blocks i want it to be removed