Published:

Vue 3 + VeeValidate - Required Checkbox Example

Example built with Vue 3.0.0 and VeeValidate 4.0.0-beta.6

Other versions available:

This is a quick example of how to implement a required checkbox field in Vue 3 with VeeValidate. For a more detailed registration form example that includes a bunch of other fields see Vue 3 + VeeValidate - Form Validation Example.

Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/vue-3-veevalidate-required-checkbox)


Vue 3 + VeeValidate Required Checkbox App Component

The app component template contains a form with a single required checkbox fields and a validation message. The form and checkbox field are built with the VeeValidate <Form /> and <Field /> components which automatically hook into the validation rules (schema) based on the name of the field.

The form calls the onSubmit() method when the form is submitted and valid. Validation rules are bound to the form with the validation-schema prop, and validation errors are provided to the form template via the scoped slot v-slot="{ errors }".

The app component code defines the required checkbox validation rule with the Yup schema validation library which VeeValidate supports out of the box, the checkbox is set to required with the rule Yup.bool().required() and setting the value of the checkbox input to true (:value="true"), for more info on Yup see https://github.com/jquense/yup.

The onSubmit() method is called when the form is valid and submitted, and simply displays the contents of the form in a javascript alert.

<template>
    <div class="card m-3">
        <h5 class="card-header">Vue 3 + VeeValidate - Required Checkbox</h5>
        <div class="card-body">
            <Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }">
                <div class="form-group form-check">
                    <Field name="acceptTerms" type="checkbox" id="acceptTerms" :value="true" class="form-check-input" :class="{ 'is-invalid': errors.acceptTerms }" />
                    <label for="acceptTerms" class="form-check-label">Accept Terms & Conditions</label>
                    <div class="invalid-feedback">{{errors.acceptTerms}}</div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary mr-1">Register</button>
                </div>
            </Form>
        </div>
    </div>    
</template>

<script>
import { Form, Field } from 'vee-validate';
import * as Yup from 'yup';

export default {
    components: {
        Form,
        Field,
    },
    setup() {
        const schema = Yup.object().shape({
            acceptTerms: Yup.bool()
                .required('Accept Ts & Cs is required')
        });

        const onSubmit = values => {
            // display form values on success
            alert('SUCCESS!! :-)\n\n' + JSON.stringify(values, null, 4));
        }

        return {
            schema,
            onSubmit
        };
    }
}
</script>

 


Need Some Vue 3 Help?

Search fiverr to find help quickly from experienced Vue 3 developers.


Exclusive Semrush Special Offer

FREE 14-day PRO trial to Semrush is available to visitors of this blog. Check your website health quickly and easily with the Semrush all-in-one site auditing tool, eliminate technical SEO issues and optimize your website's speed and performance.


Supported by