Formik如何修剪textarea内容 禁止提交仅含空格的表单

方案1：调整校验规则（改动最小） #

你当前的校验逻辑仅判断字段值是否为假值，而纯空格组成的字符串属于真值，不会被拦截，仅修改校验规则的过滤条件即可解决问题：

export const validateRequiredFields = (values, requiredFields) =>{
    return requiredFields
    // 字段值存在时先去除首尾空格，再判断是否为空
    .filter(x => !(values[x]?.trim()))
    .reduce((a, b) => ({ ...a, [b]: translate["requiredField"] }), {})
}

说明：values[x]?.trim() 会自动处理值为undefined/null的场景，避免调用trim时报错，纯空格字符串trim后为空串，会被判定为未填写，触发必填校验。

方案2：实现textarea内容自动修剪 #

如果业务允许自动移除用户输入的首尾空格，还可以选择在输入或提交阶段自动修剪内容，两种常用实现方式如下：

方式A：失去焦点时自动修剪当前字段 #

给Field组件添加onBlur事件，用户离开输入框时自动去除首尾空格：

<div className="my-data-field question-field">
            <Field type="text"
                as="textarea"
                name="question"
                className={props.errors.question && props.touched.question ? "question-field invalid" : "question-field"}
                placeholder={translate["askYourQuestion"]}
                onBlur={(e) => {
                  // 自动修剪当前字段的首尾空格
                  props.setFieldValue('question', e.target.value.trim())
                }} 
            />
            <ErrorMessage name="question" component="div" className="invalid-field-message" />
        </div>

方式B：提交时全局修剪所有字符串字段 #

如果需要对所有表单字段统一做修剪处理，可以在提交表单前统一处理values：

const handleSubmit = (values) => {
  // 遍历所有值，字符串类型自动修剪首尾空格
  const processedValues = Object.fromEntries(
    Object.entries(values).map(([key, value]) => [
      key, 
      typeof value === 'string' ? value.trim() : value
    ])
  )
  // 后续使用processedValues提交表单
}

两种方案可根据业务需求选择：如果需要保留用户原始输入仅做校验拦截，选择方案1即可；如果需要优化提交内容，避免多余空格入库，选择方案2更合适。

内容的提问来源于stack exchange，提问作者Toma Tomov