Validate Submit Button State In Vuejs Composition API

When working with any type of form, we want to quickly do the client-side validation on the submit button to make sure all the expected fields have valid input for a better user experience.

Let’s see how to validate the submit button state in this short tutorial.

When all the input fields have valid data, enable the submit button otherwise disable it. For simplicity's sake, I’ll be just checking to see if the input fields are empty or not.

Pretty straightforward.

You can get if you’ve not already.

I have a simple login form below and it’s nothing fancy!

Login.vue

<template>
<section class="signup-view">
<form class="ui form">
<div class="ui segment">
<div class="field">
<div class="ui left icon input big">
<i class="mail icon"></i>
<input type="email" placeholder="Email" v-model="user.email" />
</div>
</div>
<div class="field">
<div class="ui left icon input big">
<i class="lock icon"></i>
<input
type="password"
placeholder="Password"
v-model="user.password"
/>
</div>
</div>
<button class="ui button big pink fluid">LOG IN</button>
</div>
</form>
</section>
</template>

For additional CSS classes, I used the framework just for UI purposes but you can still follow along with it.

As you can see in the template code, I’ve bound the properties of the user object to the appropriate input fields.

Let’s define the user object using reactive().

Recommended

<script>
import { reactive } from "vue";
export default {
setup() {
const user = reactive({
email: "",
password: "",
});
return { user };
},
};
</script>

Now, let’s disable the submit button by default when email and password fields are empty otherwise enable it.

Create Reusable Submit Button State Module

Create a function called useSubmitButtonState() in a separate file which takes user as a parameter and returns isSubmitButtonDisabled boolean variable.

useSubmitButtonState.js

import { computed } from "vue";
export default function useSubmitButtonState(user) {
const isSignupButtonDisabled = computed(() => {
let disabled = true;
for (let prop in user) {
if (!user[prop]) {
disabled = true;
break;
}
disabled = false;
}
return disabled;
});
return { isSubmitButtonDisabled }
}

Use this function inside Login.vue to toggle the submit button based on if email and password are empty or not.

Login.vue

<script>
import { reactive } from "vue";
import useSubmitButtonState from "@/modules/useSubmitButtonState";
export default {
setup() {
const user = reactive({
email: "",
password: "",
});

const { isSubmitButtonDisabled } = useSubmitButtonState(user);
return { user, isSubmitButtonDisabled };
},
};
</script>

Finally, use the isSubmitButtonDisabled boolean variable in the template.

<button
class="ui button big pink fluid"
:disabled="isSubmitButtonDisabled"
>
LOG IN
</button>

There you have it!

To learn more about Form Validation in Vue 3 Composition API. Check the complete guide below:

Instructor/Owner of SoftAuthor!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store