Today a friend of mine and fellow developer was asked during the technical part of a job interview to create a registration form along with both client-side and server-side validation having only a small time frame at his disposal and absolutely zero code. This event led me to write the post you are currently reading. This is a very common interview question for jobs regarding web development or Single Page Application development roles. I’ve been asked to write a form with validation in an interview too. In fact I have even asked candidates, from the other end of the table that time, to complete a registration form when tasked with coming up with an interview question for a role at a startup I used to work for.

Anyway, the point is that this is something that gets asked a lot and it’s good to be prepared. I’m going to leave server side validation for another blog post and concentrate on the client side of things. When the clock is ticking and the first traces of anxiety start to appear you need to be prepared. Ok, designing the form is not hard. You can grab your favorite framework like Bootstrap, Foundation, Material or whatever suits your taste.

The most time consuming part of the task is the validation process. So I sat down and tried to think of a validation library that produces the fastest results. I have used several JS validation libraries in the past like ValidateJS, Parsely and Aurelia Validation but, by far the most efficient and, in my opinion, the most architecturally correct is VeeValidate. VeeValidate is an open source Vue.js plugin. In case you’ve never heard about it, Vue.js is a reactive, progressive JavaScript framework that recently reached version 2. It’s being used and recommended a lot by the people at Laravel, so much that it can be mistaken as part of the framework itself.

It’s amazing how quickly you can get up to speed with VeeValidate. To begin with, there are, mainly, two ways you can get it in your project. The simplest one is to just include the script tag

<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-beta.25/vee-validate.min.js"></script>

You then have access to VeeValidate as a global object.

The other way to go is to install it with npm and import it as an ES6 module in your application. (Reminder: At the time of this writing, ES6/ES2015 modules are not globally supported by most browsers so you’re going to need a bundler like Webpack)

Whatever way you choose you then have to register the plugin with Vue. To do this add the following line:

Vue.plugin(VeeValidate);

UPDATE 09/2017
If you’re using the newest version of Vue you will have to include VeeValidate using Vue.use

Vue.use(VeeValidate);

All set. You can begin using it. (If you dig deeper into the documentation you will see that you can also pass in a config object but that’s not the purpose of this tutorial. We want results fast with minimal configuration and VeeValidate can provide them out of the box).

Now to the best part which is also the reason why I said before that VeeValidate is the most architecturally correct validation library I have used is that you can write your validation exclusively in the view. In your .html file. That reduces view model pollution and makes it more testable. That way you can quickly switch views if you want without having to clean your view-model. That’s not to say that you will never need to write code in your view model but for most cases, at least 90% percent of the validation code will reside in the view.

VeeValidate supports a variety of validation rules which you can apply in a way similar to Laravel’s validation for those of you familiar with it. The basics of working with rules are:

• Rules are placed in a v-validate custom html attribute inaide the input that needs validation
• Rules are separated with a pipe (‘|’) just like in Laravel
• The input that you want to validate must have a name attribute.
• You can access the error messages by using the “errors” variable in the view
• You can check if a specific field is valid by checking if errors.has(““)
• You can access the first error message for a specific input with errors.first(““)
• You can access all error messages for a field using errors.all(““)

That’s essentially what you need to know to work with VeeValidate. Let’s skip the introduction and look at the code. Let’s say that you want to validate a password field. You want a password to always be present, so your password field is “required”. You also want it to be at least 8 characters long but no more than 32 characters. You can achieve it like this:

<input name="password" type="password" placeholder="Choose your password" v-validate="required|min:8|max:32">

To show an error message when the validation fails:

<span v-if="errors.has('password')">{{errors.first('password')}}</span>

Now that you know what VeeValidate is and how it works let’s move on to the form creation. I’m going to be using Bootstrap 4. You can swap the CSS classes with your own:

So as you can see the view model remains as clean as possible. All the validation takes part in the view and that’s what makes the library so awesome. Now if you want to provide custom error messages you will need to write some JavaScript code too but it does not have to be inside the view model. For more information check the official documentation http://vee-validate.logaretm.com/rules.html#custom-messages

It took me 34 minutes to create this form from scratch. I could have gone so far as to trying to achieve the same result using the validation libraries I mentioned above but that would make the post enormous and hard to write as well as read so I guess you’ll have to take my word for it.