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, enabled submit button otherwise disabled it. For the simplicity sake, I’ll be just checking to see if the input fields are empty or not.

Pretty staright forward.

You can get Up and Running With Vue JS 3 Project Using Vue CLI [2021] if you’ve not already.

I’ve a simple login form below and 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 Semantic UI CSS framework just for UI purposes but you can still follow along with it.

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

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

Recommended
Ref vs Reactive Differences In Vuejs 3 Composition API

<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:
Vue JS 3 Composition API Reusable / Scalable Form Validation – A Complete GuideI]