Happier HTML5 form validation in Vue

input:invalid {} style of CSS is useful when the form element is invalid, but the user experience is poor when using it directly. For example, an invalid style is displayed immediately when a form loads, which confuses the user. Therefore, this usage is rare in practical applications. However, if this problem is avoided, :invalid selector can play a huge role in form validation without relying on large libraries.

Dave proposed an improvement based on the original idea from 2017:

 <code>form.errors :invalid { outline: 2px solid red; }</code>

The native error style is applied only after confirming that the form is in an error state and errors class is added. Testing is also easy. For example, you can apply this class when the submit button is clicked:

 <code>submitButton.addEventListener("click", (e) => { form.classList.toggle("errors", !form.checkValidity()) });</code>

It can also be applied when the input box loses focus or at other times. You can even wrap each input box in a wrapper and switch the wrapper class when appropriate.

Dave applies this idea to Vue:

We set errors to false when initializing the form component because we don't want the wrong style to be displayed before the user submits the form. The invalidateForm function just sets this.error to true . This is one of the disadvantages of CSS :invalid pseudo-class, it is too urgent. By listening to the invalid event, the application of styles can be delayed until after the first form submission attempt, we know that there is an error in the form.

This approach does not require additional libraries, making full use of the native functionality of HTML form validation. The following link is an improved version that also displays an error message:

Direct link →

The above is the detailed content of Happier HTML5 form validation in Vue. For more information, please follow other related articles on the PHP Chinese website!