Comments (3)
false
is a valid value to yup
's .required
so it won't make sure the user has checked the box.
instead try oneOf
yup.boolean().oneOf([true], 'Field must be checked')
from vee-validate.
I spotted a few issues in your snippets.
You should use either useField
or Field
component, not both.
You should also pass the type
to the useField
options.
const { value, errorMessage, checked } = useField(() => props.name, undefined, {
type: 'checkbox'
uncheckedValue: false,
checkedValue: true
});
What is left is to bind it with a input
element instead of the Field
component and you can use v-model
then or use the checked
property. It is up to you how to hook it up.
Now for setting the initial value, you can either pass it to useField
options, which would make sense if you want to set it via a prop. Alternatively you can set it on the form level.
useField(() => props.name, undefined, {
// ...
initialValue: true
});
// OR
useForm({
initialValues: { checkboxField: true }
});
You can also use resetForm
to toggle the checkbox initial value there, please check the docs in that area.
from vee-validate.
Thanks @logaretm.
I have updated this to the below and can see that the checked
property is updating according to the initial value passed in via props. However the yup schema validation on the parent component isn't seeing that
<script setup>
import { useField } from 'vee-validate';
const props = defineProps({
class: {
type: String,
default: '',
},
name: {
type: String,
required: true,
},
intro: {
type: String,
required: false,
},
initialValue: {
type: Boolean,
default: false,
},
});
const { value, errorMessage, checked, handleChange } = useField(
() => props.name,
undefined,
{
type: 'checkbox',
uncheckedValue: false,
checkedValue: true,
initialValue: props.initialValue,
}
);
</script>
<template>
<div class="mb-6 md:max-w-[530px]">
<label :for="name" class="o-label">
<span class="o-instructions" v-if="intro">{{ intro }}</span>
<div class="flex">
<input
type="checkbox"
:name="name"
:id="name"
:value="value"
:checked="checked"
@change="handleChange"
class="sr-only o-checkbox" />
<span class="o-checkbox__box"></span>
<div class="ml-3 o-label__text">
<slot></slot>
</div>
</div>
</label>
<p class="o-error" v-if="errorMessage">
{{ errorMessage }}
</p>
</div>
</template>
That's using
const currentSchema = const schema = [
yup.object({
copyrightOwnershipConfirmed: yup.boolean().required('Please check the box to confirm ownership of copyright.'),
})
];
const { values, handleSubmit, resetForm } = useForm({
validationSchema: currentSchema,
keepValuesOnUnmount: true
});
And including the checkbox component above:
<Checkbox
name="copyrightOwnershipConfirmed"
:initial-value="false">
<span>Label text here</span>
</Checkbox>
I've tried using v-model to bind copyrightOwnershipConfirmed
on the component and have also added a watch to try and force the model value but I can't get the yup validator to pick up that this field isn't checked.
from vee-validate.
Related Issues (20)
- Lost errors after use resetForm()
- Allow Valibot's schema level options(abortEarly, abortPipeEarly...) to be configured HOT 1
- "warn" in ValidationOptions interface
- reactive initial value in useField has no effect on resetField
- Multi-Step Form doesn't validate last step HOT 1
- keepValuesOnUnmount not being respected using useField
- using ToTypedSchema seems to validate multiple times in valibot HOT 1
- The validator 'all' must be a function error in prod when importing all @vee-validate/rules HOT 2
- Extend meta object from useForm with meta state per field
- With Typescript + Date validation + PrimeVue DatePicker fail compilation HOT 2
- missing handleInvalidSubmit() in useForm composable
- configure API should change
- ArrayFields are validated before touched
- [Zod] Unexpectedly trigger the `refine` or `superRefine` validation.
- Keep generic aspect of SubmissionHandler in FormSlotProps
- form values will be covered by the `initialValue` value of `usefield` HOT 1
- defineField config not reactive for conditionally required property
- useField - reactive field-id not working
- [Question] Revalidation of empty input where initial validation has passed before
- Typing a leading zero into a month component of a date field erases the month and year, in firefox
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vee-validate.