基于其他字段的onBlur对输入文本字段进行自定义Formik验证

时间:2019-05-08 08:49:42

标签: reactjs formik

我有一个名为A的文本字段,它不是必需的。如果用户在A字段中输入了一些值,而又没有在依赖于A字段的B字段中输入任何值,则尝试触发验证消息。

   <Field.Input
            name={field.name}
            error={Boolean(validationMessage)}
            defaultValue={field.value}
            onBlur={(e) => {
              field.name === 'Name'
                ? e.target.value
                  ? (form.setFieldValue(field.name, error),
                    form.setFieldTouched(field.name))
                  : (form.setFieldValue(field.name, e.target.value), form.setFieldTouched(field.name))
                : form.setFieldValue(field.name, e.target.value)
              form.setFieldTouched(field.name)
            }}
          />

1 个答案:

答案 0 :(得分:0)

在字段B的onFocus中触发验证。

<Field
    name="fieldB"
    validate={() => {
        if (!values.fieldA) return 'Please fill fieldA';
    }}
    onFocus={() => validateField('fieldB')}
/>

有关验证的更多详细信息,包括validatevalidateField的使用,可以在Formik Documentation中找到。

代码沙箱:https://codesandbox.io/s/zzpnzw8p3

注意:另外,如果字段A为空,您也可以禁用字段B。

<Field
    name="fieldB"
    disabled={!values.fieldA}
    placeholder={!values.fieldA && 'Please fill fieldA'}
    ...
/>