Validating a simple form using Vue 3

/ #Vue.js

Often you want to validate a form before you send data to the backend. Here is a short guide on how to do this using Vue.

The form

<div id="validate-form-app">
    <form method="post" action="." @submit="validateForm">
        <input type="text" name="title" class="input" v-model="title">

        <button class="button">Submit</button>

Here we have a simple form with a text input field. We want to use Vue to check if this field is filled or not. Inside the form tag, we use Vue to call a method called "validateForm" when we submit the form.

    const validateFormApp = {
        data() {
            return {
                title: ''
        methods: {
            validateForm(e) {
                if (this.title) {
                    return true
                } else {
                    alert('Form error')


                    return false


First we create a new Vue app for the validation. We have a simple data array with the title. This could be expanded to all fields you need.

Inside the methods object, we have a method called "validateForm". As you can see, we get a parameter called "e". This is short for "event".

We do a check on the title, if this is not empty, we return true and the form will be submitted. If it's empty, we show a simple error alert to the user and prevent the form from submitting.


No comments yet...

Add comment


Subscribe to my weekly newsletter. One time per week I will send you a short summary of the tutorials I have posted in the past week.