i want to update a list of field data with formik. i have this validation
validationSchema: Yup.object().shape({
password: Yup.string()
.min(4, 'Password must be at least 4 characters.')
.required('Password must be at least 4 characters.'),
....
}),
i want the user to be able to set password at least a length of 4 and if the user does not enter password then submit as empty string. password component
<FormControl
fullWidth
error={Boolean(formik.touched.password && formik.errors.password)}
variant="outlined"
>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
id="password"
name="password"
inputProps={{
autoComplete: 'password',
form: {
autoComplete: 'off',
},
}}
type={showPassword ? 'text' : 'password'}
onBlur={formik.handleBlur}
onChange={formik.handleChange}
value={formik.values.password}
endAdornment={
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={() => setShowPassword(!showPassword)}
onMouseDown={(event) => event.preventDefault()}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
}
label="Password"
/>
{formik.errors.password && <FormHelperText>{formik.errors.password}</FormHelperText>}
</FormControl>
but with this code, if the password field is touched but not entered any password formik is not letting to submit the data. how can I do that? thank u in advance.
UPDATE:
onSubmit
onSubmit: (values) => {
if (
values.password && values.password.length === 0
) {
delete values.password
}
dispatch(updateAccount({...values}))
},
})
Your code is working as expected. The require is being hit when submitting, because:
empty strings are also considered 'missing' values
If you don't enter any value, the submission will be rejected. Check the documentation here.
To solve your problem, you just need to delete the require in the validation.