Vue 3+VeeValidate – Required Checkbox Example (Composition API)

Problem : Vue 3+VeeValidate – Required Checkbox Example (Composition API)

Vue Composition API

The component in the example is built with the new Vue Composition API that comes with Vue 3, component logic is located within a <script setup> block that shares the same scope as the template, so variables and functions declared in the block are directly accessible to the template. For more info on the Vue Composition API see https://vuejs.org/guide/extras/composition-api-faq.html.

VeeValidate

VeeValidate is a library for building, validating and handling forms in Vue.js. VeeValidate 4 was recently released and is compatible with Vue 3, the official docs are available at https://vee-validate.logaretm.com/v4.

Here it is in action:

Vue 3+VeeValidate – Required Checkbox Example (Composition API)

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.

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 that 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 }".

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

const schema = Yup.object().shape({
    acceptTerms: Yup.string()
        .required('Accept Ts & Cs is required')
});

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

<template>
    <div class="card m-3">
        <h5 class="card-header">Vue 3 + VeeValidate - Required Checkbox Example (Composition API)</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>
                    <button type="reset" class="btn btn-secondary">Reset</button>
                </div>
            </Form>
        </div>
    </div>    
</template>

More Error Tutorials >>

Vue 3+VeeValidate – Form Validation Example (Composition API)

https://stackoverflow.com/

Leave a Reply

Your email address will not be published.