- Adding Instance Properties
- Form Validation
- Editable SVG Icon Systems
- Create a CMS-Powered Blog
- Unit Testing Vue Components
- Creating Custom Scroll Directives
- Debugging in VS Code
- Using Axios to Consume APIs
- Avoiding Memory Leaks
- Client-Side Storage
- Packaging Vue Components for npm
- Dockerize Vue.js App
- Practical use of scoped slots with GoogleMaps
Form validation is natively supported by the browser, but sometimes different browsers will handle things in a manner which makes relying on it a bit tricky. Even when validation is supported perfectly, there may be times when custom validations are needed and a more manual, Vue-based solution may be more appropriate. Let’s begin with a simple example.
Given a form of three fields, make two required. Let’s look at the HTML first:
Let’s cover it from the top. The
<form> tag has an ID that we’ll be using for the Vue component. There’s a submit handler that you’ll see in a bit, and the
action is a temporary URL that would point to something real on a server someplace (where you have backup server-side validation of course).
Beneath that there is a paragraph that shows or hides itself based on an error state. This will render a simple list of errors on top of the form. Also note we fire the validation on submit rather than as every field is modified.
The final thing to note is that each of the three fields has a corresponding
Fairly short and simple. We define an array to hold errors and set
null values for the three form fields. The
checkForm logic (which is run on submit remember) checks for name and age only as movie is optional. If they are empty we check each and set a specific error for each. And that’s really it. You can run the demo below. Don’t forget that on a successful submission it’s going to POST to a temporary URL.
See the Pen form validation 1 by Raymond Camden (@cfjedimaster) on CodePen.
Using Custom Validation
While the change here is small, note the
novalidate="true" on top. This is important because the browser will attempt to validate the email address in the field when
As you can see, we’ve added
validEmail as a new method and it is simply called from
checkForm. You can play with this example here:
See the Pen form validation 2 by Raymond Camden (@cfjedimaster) on CodePen.
Another Example of Custom Validation
For the third example, we’ve built something you’ve probably seen in survey apps. The user is asked to spend a “budget” for a set of features for a new Star Destroyer model. The total must equal 100. First, the HTML.
Note the set of inputs covering the five different features. Note the addition of
.number to the
We set up the total value as a computed value, and outside of that bug I ran into, it was simple enough to setup. My checkForm method now just needs to see if the total is 100 and that’s it. You can play with this here:
See the Pen form validation 3 by Raymond Camden (@cfjedimaster) on CodePen.
In my final example, we built something that makes use of Ajax to validate at the server. The form will ask you to name a new product and will then check to ensure that the name is unique. We wrote a quick Netlify serverless action to do the validation. While it isn’t terribly important, here is the logic:
Basically any name but “vista”, “empire”, and “mbp” are acceptable. Ok, so let’s look at the form.
We start off with a variable representing the URL of the API that is running on OpenWhisk. Now look at
checkForm. In this version, we always prevent the form from submitting (which, by the way, could be done in the HTML with Vue as well). You can see a basic check on
this.name being empty, and then we hit the API. If it’s bad, we add an error as before. If it’s good, right now we do nothing (just an alert), but you could navigate the user to a new page with the product name in the URL, or do other actions as well. You can run this demo below:
See the Pen form validation 4 by Raymond Camden (@cfjedimaster) on CodePen.
While this cookbook entry focused on doing form validation “by hand”, there are, of course, some great Vue libraries that will handle a lot of this for you. Switching to a prepackage library may impact the final size of your application, but the benefits could be tremendous. You have code that is (most likely) heavily tested and also updated on a regular basis. Some examples of form validation libraries for Vue include: