{abortEarly: false} is not working in Joi v17.6

Viewed 273

I am creating a login form and attempting to use Joi to set the schema. I currently have a rule that username is to be a string and password is to be a string. I used abortEarly: false so both errors would be validated upon submit. Only the username is detected with the error message. abortEarly: false is not working. Please let me know if this is a version issue, or if I am calling it incorrectly:

class LoginForm extends Component {
  state = {
    account: {
    username: '',
    password: ''
    },
    errors: {}
    }

validate = () => {
  const { account } = this.state;
  const schema = Joi.object({
    username: Joi.string().label('Username'),
    password: Joi.string().label('Password')
  })
  const options = { abortEarly: false }
  const { error } = schema.validate(
    account,
    this.schema,
    options
  );
  if (!error) return null;
 
  const errors = {};
  for (let item of error.details)
    errors[item.path[0]] = item.message;
  return errors;
  }

If there is another industry-standard tool that is easer to use for validation, I am open to learning that too. I am only two months into learning React. I have attached an image of what my render is looking like upon submitting the blank form. Both username and password should have an error message. enter image description here

1 Answers

Ok no one commented on this, but I fixed it by converting the class to a functional component. Not sure why that worked, would love it if someone could explain. But, alas, I am validating both inputs without aborting early.

Related