CODEWITHSUNDEEP
reactjsvalidationantdyupreact-hook-form
ShaSha
ShaSha

Reputation: 699

Ant design checkbox react hook forma validation

this is my jsx:

            <Form.Item
              name="agreement"
              validateStatus={errors.agreement ? 'error' : 'success'}
              help={errors.agreement?.message}
              valuePropName="checked"
            >
              <Controller
                name="agreement"
                control={control}
                render={(props) => (
                  <Checkbox {...props}>
                    من
                    <a href="" onClick={showModal}>
                      {' '}
                      قوانین و شرایط{' '}
                    </a>
                    را می پذیرم
                  </Checkbox>
                )}
              />
            </Form.Item>

this is my react-hook-form:

  const { handleSubmit, control, errors, getValues, reset } = useForm({
    mode: 'onChange',
    defaultValues: {
      agreement: true,
    },
    resolver: yupResolver(registerValidationSchema),
  })

and this is Yup validation schema:

const registerValidationSchema =  Yup.object().shape({
  agreement: Yup.boolean().oneOf([true], 'لطفا قوانین و شرایط را بپذیرید.'),
})

and finally this is my error message that i couldn't solved it.

warning: [antd: Checkbox] value is not a valid prop, do you mean checked?

Upvotes: 2

Views: 5254

Answers (4)

NeERAJ TK
NeERAJ TK

Reputation: 2695

Note: Checkbox validation for Antd Form, not for React Hook Form

For checkbox validation in Antd Form item pass the param valuePropName="checked" to the Form Item, as:

      <Form.Item
        name="terms"
        valuePropName="checked"
        rules={[
          {
            required: true,
            message: "Please accept the terms & conditions",
          },
        ]}
      >
        <Checkbox>
          I accept the Terms and Conditions
        </Checkbox>
      </Form.Item>

Upvotes: 0

sun1211
sun1211

Reputation: 1608

we can use

<Form.Item name="allowTerm" valuePropName="checked"
    rules={[
        {
            validator: async (_, checked) => {
                if (!checked) {
                    return Promise.reject(
                        new Error("you must accept to deposit 10% of the sale price"),
                    );
                }
            },
        },
    
    ]}
>
    <Checkbox>
        I accept to deposit 10% of the sale price
    </Checkbox>
</Form.Item>

enter image description here

Support for ant design : Ant Form

Upvotes: 4

ShaSha
ShaSha

Reputation: 699

 <Form.Item
              name="agreement"
              validateStatus={errors.agreement ? 'error' : 'success'}
              help={errors.agreement?.message}
              valuePropName="checked"
            >
              <Controller
                name="agreement"
                control={control}
                render={({ value, ...restProps }) => (
                  <Checkbox
                    {...restProps}
                    onChange={(e) =>
                      setValue('agreement', e.target.checked, {
                        shouldValidate: true,
                        shouldDirty: true,
                      })
                    }
                    checked={value}
                  >
                    من
                    <a href="" onClick={showModal}>
                      {' '}
                      قوانین و شرایط{' '}
                    </a>
                    را می پذیرم
                  </Checkbox>
                )}
              />
            </Form.Item>

Done

Upvotes: 0

Chanandrei
Chanandrei

Reputation: 2421

antd Checkbox accept checked as value not true or false. Try this:

const { handleSubmit, control, errors, getValues, reset } = useForm({
    mode: 'onChange',
    defaultValues: {
      //agreement: true,
        agreement: "checked"
    },
    resolver: yupResolver(registerValidationSchema),
})

Upvotes: 0

Related Questions