英文:
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;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论