Simple custom Vue.js form validation

This will show you a simple real-time form validation in Vue.js with help of computed properties.

For simplicity I will use the bootstrap-vue framework for the form. But this work’s without any external dependencies.

The example above disables the submit button and shows the text “Invalid data” until the form is valid. The validation part is handled by a computed property in Vue. In the computed property you can specify all your requirements as a boolean equation, ex. input1 needs to be above 0 and input2 can’t be empty. Thanks of the mechanics of computed properties it will update in real-time if any of the inputs are updated.

If you want to have some individual input field messages you can add that as well by separating each field to its separate computed property. These can then be aggregated together to one final property like our dataValid.

What I want to show with this is if you only need a simple real-time form validation without individual input field messages, you don’t need to use complex libraries.