forms - 是的验证 : Require all or none fields of a language

Question

我们有一个带有多语言输入的相当大的表单 - 几个字段:

name_德语

name_french

name_italian

description_德语

description_法语

description_italian

... 更多

如果填写了一个德语字段，则应要求所有其他德语字段。其他语言也是如此。应该可以同时填充德语和法语字段，但意大利语字段可以为空。
不知何故，我无法让它工作。这是我尝试过的:

Yup.object().shape({
     name_german: Yup.string().test(
         'requireAllIfOneIsFilled',
         'formvalidation.required.message',
         function () {
            return multiLanguageTest(this.parent, 'german');
         },
     ),
    ... // same for other fields
});

然后像这样进行测试:

const multiLanguageTest = (formValues, language: 'german' | 'french' | 'italian'): boolean => {
    const errorCount = dependentFields.reduce((errorCount, rawFieldName) => {
        const postFixedField = `${rawFieldName}_${language}`;

        if (!formValues[postFixedField]) {
            return errorCount + 1;
        }
        return errorCount;
    }, 0);

    return errorCount === 0;
};

这给了我一个非常不可调试的行为。我在使用 .test 的概念吗？错误的？

Answer 1

可以使用 context 以这种方式进行验证。调用时传入的选项 .validate .context 的一个简单但说明性的例子选项 - 传递 require_name键(带有 truthy 值)到 .validate调用会将架构更改为 .required() :

const NameSchema = yup.string().when(
  '$require_name',
  (value, schema) => value ? schema.required() : schema
);

const name = await NameSchema.validate('joe', {
  context: {
    require_name: true,
  }
});

如果我们可以在验证期间将必填字段传递给架构，我们可以为您的验证案例使用以下架构:

const AllOrNoneSchema = yup.object({
  name_german: yup.string()
    .when('$name_german', (value, schema) => value ? schema.required() : schema),
  description_german: yup.string()
    .when('$description_german', (value, schema) => value ? schema.required() : schema),
  date_german: yup.string()
    .when('$date_german', (value, schema) => value ? schema.required() : schema),
  // ...other_languages
});

在您的情况下，如果填写了一个或多个字段，我们必须为每种语言传递一个必需的上下文键。即如果已经填写了一个德语字段，我们希望传递一个包含所有 ${something}_german 的对象值为真的键:

{
  name_german: true,
  description_german: true,
  ...
}

为此，我们可以创建一个辅助函数，它接受您的表单对象并返回一条记录 boolean。上例中的值:

const createValidationContext = (form) => {
  const entries = Object.entries(form);
  
  const requiredLanguages = entries.reduce((acc, [key, value]) => {
    return !value.length ? acc : [...acc, key.split('_')[1]];
  }, []);
  
  return Object.fromEntries(
    entries.map(([key, value]) => [key, requiredLanguages.includes(key.split('_')[1])])
  )
};

综上所述，我们有以下可行的解决方案:

const yup = require("yup");

const AllOrNoneSchema = yup.object({
  name_german: yup.string()
    .when('$name_german', (value, schema) => value ? schema.required() : schema),
  description_german: yup.string()
    .when('$description_german', (value, schema) => value ? schema.required() : schema),
  date_german: yup.string()
    .when('$date_german', (value, schema) => value ? schema.required() : schema),
});

const createValidationContext = (form) => {
  const entries = Object.entries(form);
  
  const requiredLanguages = entries.reduce((acc, [key, value]) => {
    return !value.length ? acc : [...acc, key.split('_')[1]];
  }, []);
  
  return Object.fromEntries(
    entries.map(([key, value]) => [key, requiredLanguages.includes(key.split('_')[1])])
  )
};

const form = {
  description_german: "nein",
  date_german: "juli",
  name_german: "nena",
}

const formContext = createValidationContext(form);

console.log(formContext); // { description_german: true, date_german: true, name_german: true }

const validatedForm = await AllOrNoneSchema.validate(form, { context: formContext });

console.log(validatedForm); // { description_german: "nein", date_german: "juli", name_german: "nena" }

这个解决方案的一个活生生的例子，有多种语言，可以在 RunKit 上看到一个测试，这里: https://runkit.com/joematune/6138ca762dc6340009691d8a
有关 Yup 的更多信息 context api，在这里查看他们的文档: https://github.com/jquense/yup#mixedwhenkeys-string--arraystring-builder-object--value-schema-schema-schema