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.