英文:
Added validations using Formik, but the error is not showing up when I click submit button
问题
我使用Formik创建了一个上传文件的表单。如果用户在提交表单时没有选择任何文件,我想要添加验证以显示错误。但是错误没有显示。
Formik 代码:
<Formik
  enableReinitialize={true}
  initialValues={{}}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
>
  {(props) => (
    <Form>
      <ErrorMessage
        name="file"
        component="div"
        className="alert alert-warning"
      ></ErrorMessage>
      <fieldset className="form-group">
        <label className="form-label">
          上传文件(最大文件大小:200MB)
        </label>
        <Field
          className="form-control form-control-lg"
          id="formFileLg"
          type="file"
          name="file"
          onChange={onFileChangeHandler}
        />
      </fieldset>
      <p>
        <button type="submit" className="btn btn-primary my-2">
          分享
        </button>
      </p>
    </Form>
  )}
</Formik>;
function validate() {
  console.log(state.length);
  let errors = {};
  if (state.length === 0) {
    errors.file = "错误";
  }
  console.log(errors);
  return errors;
}
英文:
I created a form to upload file using formik. I want to add validations if the user submit the form without selecting any file then the error will show up. But the error is not showing.
Formik code :
<Formik
  enableReinitialize={true}
  initialValues={{}}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
>
  {(props) => (
    <Form>
      <ErrorMessage
        name="file"
        component="div"
        className="alert alert-warning"
      ></ErrorMessage>
      <fieldset className="form-group">
        <label className="form-label">
          Upload file below (max file size : 200MB)
        </label>
        <Field
          className="form-control form-control-lg"
          id="formFileLg"
          type="file"
          name="file"
          onChange={onFileChangeHandler}
        />
      </fieldset>
      <p>
        <button type="submit" className="btn btn-primary my-2">
          Share
        </button>
      </p>
    </Form>
  )}
</Formik>;
function validate() {
  console.log(state.length);
  let errors = {};
  if (state.length === 0) {
    errors.file = "error";
  }
  console.log(errors);
  return errors;
}
答案1
得分: 1
<Formik
  enableReinitialize={true}
  initialValues={{
    file: null // 将初始文件值设置为null
  }}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
>
  {(props) => (
    <Form>
      <ErrorMessage
        name="file"
        component="div"
        className="alert alert-warning"
      ></ErrorMessage>
      <fieldset className="form-group">
        <label className="form-label">
          上传文件(最大文件大小:200MB)
        </label>
        <Field
          className="form-control form-control-lg"
          id="formFileLg"
          type="file"
          name="file"
          onChange={(event) => {
            const file = event.target.files[0];
            props.setFieldValue('file', file); // 更新表单字段值
          }}
        />
      </fieldset>
      <p>
        <button type="submit" className="btn btn-primary my-2">
          分享
        </button>
      </p>
    </Form>
  )}
</Formik>;
function validate(values) {
  let errors = {};
  if (!values.file) { // 检查是否未选择文件
    errors.file = "请选择文件";
  }
  return errors;
}
英文:
<Formik
enableReinitialize={true}
initialValues={{
file: null // Set initial file value as null
}}
onSubmit={callUploadFileApi}
validate={validate}
validateOnChange={false}
validateOnBlur={false}
>
{(props) => (
<Form>
<ErrorMessage
name="file"
component="div"
className="alert alert-warning"
></ErrorMessage>
<fieldset className="form-group">
<label className="form-label">
Upload file below (max file size: 200MB)
</label>
<Field
className="form-control form-control-lg"
id="formFileLg"
type="file"
name="file"
onChange={(event) => {
const file = event.target.files[0];
props.setFieldValue('file', file); // Update form field value
}}
/>
</fieldset>
<p>
<button type="submit" className="btn btn-primary my-2">
Share
</button>
</p>
</Form>
)}
</Formik>;
function validate(values) {
let errors = {};
if (!values.file) { // Check if file is not selected
errors.file = "Please select a file";
}
return errors;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。


评论