[Vuejs]-Vue JS – Display checkbox validation error on submit

by

0👍

I created simplified versions of your components in order to demonstrate how to implement the desired functionality.

CheckboxAccept.vue

<template>
  <div class="checkbox-accept">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" v-model="accepted" @change="processAccept" id="checkbox1">
      <label class="form-check-label" for="checkbox1">
        Accept terms
      </label>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        accepted: false
      }
    },
    methods: {
      processAccept() {
        this.$emit('terms-accepted-event', this.accepted)
      }
    }
  }
</script>

Register.vue

<template>
  <div class="register">
    <h4>Register</h4>
    <div class="row">
      <div class="col-md-6">
        <form @submit.prevent="submitForm">
          <checkbox-accept @terms-accepted-event="processCheckboxAccept" />
          <button type="submit" class="btn btn-secondary">Submit</button>
          <span v-if="displayWarning" class="warning">Please accept terms</span>
        </form>
      </div>
    </div>
    <h5 v-if="displaySuccess">Registration succeeded!</h5>
  </div>
</template>

<script>
  import CheckboxAccept from './CheckboxAccept';

  export default {
    components: {
      CheckboxAccept
    },
    data() {
      return {
        termsAccepted: false,
        displayWarning: false,
        displaySuccess: false
      }
    },
    methods: {
      processCheckboxAccept(accepted) {
        this.termsAccepted = accepted;
        this.displayWarning = false;
      },
      submitForm() {
        if (!this.termsAccepted) {
          this.displayWarning = true;
        }
        else {
          this.displaySuccess = true;
        }
      }
    }
  }
</script>

<style scoped>
  .warning {
    color: red;
    margin-left: 1rem;
  }
</style>

Leave a comment