Space 使用 react formik 在 react 中进行验证

Question

index.js

<div className="form-group">
  <label htmlFor='product_name'>Product Name:</label>
  <input type="text" name="product_name" placeholder="Enter Product Name" className="form-control"
    onChange={formik.handleChange} onBlur={formik.handleBlur} />
  {
    formik.touched.product_name && formik.errors.product_name && formik.values.product_name.length > 0 ? (
      <div className='error'>{formik.errors.product_name}</div>) : null
  }
</div>

我正在使用 formik 和 react 进行验证，但是当我输入 space 它会验证表单，但我想如果只有 space 它不会验证，直到有一些文本。谁能帮帮我

Answer 1

你可以试试这个：

  {
    formik.touched.product_name && formik.errors.product_name && formik.values.product_name.trim().length > 0 && formik.values.product_name.length > 0 ? (
      <div className='error'>{formik.errors.product_name}</div>) : null
  }

这应该可以解决您的问题：formik.values.product_name.trim().length > 0

Answer 2

使用Yup.string().trim():

import * as Yup from "yup";
import React from "react";
import { Form, Formik } from "formik";

export default function App() {
  return (
    <Formik
      initialValues={{ product_name: "" }}
      onSubmit={(values) => console.log(values)}
      validationSchema={Yup.object({
        product_name: Yup.string().trim().required()
      })}
    >
      {(formik) => (
        <Form>
          <div className="form-group">
            <label htmlFor="product_name">Product Name:</label>
            <input
              type="text"
              name="product_name"
              placeholder="Enter Product Name"
              className="form-control"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            {formik.touched.product_name && formik.errors.product_name ? (
              <div className="error">{formik.errors.product_name}</div>
            ) : null}
          </div>
        </Form>
      )}
    </Formik>
  );
}

https://codesandbox.io/s/wispy-smoke-ctzvz?file=/src/App.js:0-1050

Space 使用 react formik 在 react 中进行验证

Space validation in react using react formik

reactjs

react-redux

yup

formik