使用Formik添加了验证,但当我点击提交按钮时,错误没有显示出来。

huangapple go评论80阅读模式
英文:

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 :

&lt;Formik
  enableReinitialize={true}
  initialValues={{}}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
&gt;
  {(props) =&gt; (
    &lt;Form&gt;
      &lt;ErrorMessage
        name=&quot;file&quot;
        component=&quot;div&quot;
        className=&quot;alert alert-warning&quot;
      &gt;&lt;/ErrorMessage&gt;
      &lt;fieldset className=&quot;form-group&quot;&gt;
        &lt;label className=&quot;form-label&quot;&gt;
          Upload file below (max file size : 200MB)
        &lt;/label&gt;
        &lt;Field
          className=&quot;form-control form-control-lg&quot;
          id=&quot;formFileLg&quot;
          type=&quot;file&quot;
          name=&quot;file&quot;
          onChange={onFileChangeHandler}
        /&gt;
      &lt;/fieldset&gt;
      &lt;p&gt;
        &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary my-2&quot;&gt;
          Share
        &lt;/button&gt;
      &lt;/p&gt;
    &lt;/Form&gt;
  )}
&lt;/Formik&gt;;
function validate() {
  console.log(state.length);
  let errors = {};
  if (state.length === 0) {
    errors.file = &quot;error&quot;;
  }
  console.log(errors);
  return errors;
}

答案1

得分: 1

&lt;Formik
  enableReinitialize={true}
  initialValues={{
    file: null // 将初始文件值设置为null
  }}
  onSubmit={callUploadFileApi}
  validate={validate}
  validateOnChange={false}
  validateOnBlur={false}
&gt;
  {(props) =&gt; (
    &lt;Form&gt;
      &lt;ErrorMessage
        name=&quot;file&quot;
        component=&quot;div&quot;
        className=&quot;alert alert-warning&quot;
      &gt;&lt;/ErrorMessage&gt;
      &lt;fieldset className=&quot;form-group&quot;&gt;
        &lt;label className=&quot;form-label&quot;&gt;
          上传文件最大文件大小200MB
        &lt;/label&gt;
        &lt;Field
          className=&quot;form-control form-control-lg&quot;
          id=&quot;formFileLg&quot;
          type=&quot;file&quot;
          name=&quot;file&quot;
          onChange={(event) =&gt; {
            const file = event.target.files[0];
            props.setFieldValue(&#39;file&#39;, file); // 更新表单字段值
          }}
        /&gt;
      &lt;/fieldset&gt;
      &lt;p&gt;
        &lt;button type=&quot;submit&quot; className=&quot;btn btn-primary my-2&quot;&gt;
          分享
        &lt;/button&gt;
      &lt;/p&gt;
    &lt;/Form&gt;
  )}
&lt;/Formik&gt;;

function validate(values) {
  let errors = {};
  if (!values.file) { // 检查是否未选择文件
    errors.file = &quot;请选择文件&quot;;
  }
  return errors;
}
英文:
&lt;Formik
enableReinitialize={true}
initialValues={{
file: null // Set initial file value as null
}}
onSubmit={callUploadFileApi}
validate={validate}
validateOnChange={false}
validateOnBlur={false}
&gt;
{(props) =&gt; (
&lt;Form&gt;
&lt;ErrorMessage
name=&quot;file&quot;
component=&quot;div&quot;
className=&quot;alert alert-warning&quot;
&gt;&lt;/ErrorMessage&gt;
&lt;fieldset className=&quot;form-group&quot;&gt;
&lt;label className=&quot;form-label&quot;&gt;
Upload file below (max file size: 200MB)
&lt;/label&gt;
&lt;Field
className=&quot;form-control form-control-lg&quot;
id=&quot;formFileLg&quot;
type=&quot;file&quot;
name=&quot;file&quot;
onChange={(event) =&gt; {
const file = event.target.files[0];
props.setFieldValue(&#39;file&#39;, file); // Update form field value
}}
/&gt;
&lt;/fieldset&gt;
&lt;p&gt;
&lt;button type=&quot;submit&quot; className=&quot;btn btn-primary my-2&quot;&gt;
Share
&lt;/button&gt;
&lt;/p&gt;
&lt;/Form&gt;
)}
&lt;/Formik&gt;;
function validate(values) {
let errors = {};
if (!values.file) { // Check if file is not selected
errors.file = &quot;Please select a file&quot;;
}
return errors;
}

huangapple
  • 本文由 发表于 2023年7月7日 02:40:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76631692.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定