Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

429
Views
How to get yup.string() to require string of any length greater than 3 or empty

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}))
    },
  })
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!