November 09, 2020 (Dave Rupert)
There are a few differences compared to the vanilla DOM implementation. The non-framework version relied on
addEventListener to loop through inputs, which I guess you could do inside a Vue component, but feels a bit like an anti-pattern, so I had to modify the approach a smidge.
The first step is I’m applying a
.errors styling class to the parent
<form> when one of the inputs invalidates. This is triggered by the component-level
this.errors state. Originally the class was put on the, but we can safely put it on the form instead of each individual input’s state.
The second bit is the
@invalid bind directive on each
required input. This replaces looping through each
input and adding a
addEventListener but has the same effect of attaching a method to the
invalid event. The
invalidateForm() method helps us visually invalidate the form and just like before HTML does all the
submit event cancellation for us.