Form validation errors don't always clear out

[triketora]

I have a validate function that gets called when the submit button is clicked. It returns a object with error messages as per the spec. In my form, I check formApi.errors and render the error messages if they exist. For some reason, formApi.errors doesn't always update after the validate function runs. If I do a console.log inside the validate function, I can see it running and that the errors object is updating, but this doesn't get reflected in the form itself. In the screencap below, at the very end I've changed the field so everything validates and there should be no errors, but the error message still shows. Thoughts?

<Form
  defaultValues={this.state.data}
  validate={this.validate}
  validateOnSubmit={true}
  onSubmit={this.handleSubmit}
  getApi={this.setFormApi}
>
  {formApi =>
    <form
      onSubmit={e => {
        e.preventDefault();
        console.log('submitting');
        return formApi.submitForm(e);
      }}
    >
      <div>
        formApi.submits: {JSON.stringify(formApi.submits)}<br />
        formApi.errors {JSON.stringify(formApi.errors)}
      </div>
      <div className="preferred-name-wrapper">
        <label htmlFor="preferred-name">Preferred name</label>
        <br />
        <Text
          field="preferredName"
          id="preferredName"
          className={`${formApi.errors && formApi.errors.preferredNa
            ? 'has-error'
            : ''}`}
          placeholder="e.g., Goldilocks"
        />
        <p className="helper-text error preferred-name-error">
          {formApi.errors && formApi.errors.preferredName}
        </p>
      </div>
      <div className="email-wrapper">
        <label htmlFor="email">Email</label>
        <br />
        <Text
          field="email"
          id="email"
          className={`${formApi.errors && formApi.errors.email
            ? 'has-error'
            : ''}`}
        />
        <p className="helper-text error email-error">
          {formApi.errors && formApi.errors.email}
        </p>
      </div>
      <div className="password-wrapper">
        <label htmlFor="password">Password</label>
        <br />
        <Text
          field="password"
          id="password"
          type="password"
          className={`${formApi.errors && formApi.errors.password
            ? 'has-error'
            : ''}`}
        />
      </div>
      <div className="password-helper-text-wrapper">
        {(formApi.errors &&
          formApi.errors.password &&
          <p className="helper-text error password-error">
            {formApi.errors && formApi.errors.password}
          </p>) ||
          <p className="helper-text password-helper-text">
            Minimum 8 characters; at least 1 letter and 1 number.
          </p>}
      </div>
      <hr />
      <div className="signup-wrapper">
        <button className="signup bb-yellow" type="submit">
          Sign up
        </button>
        <p className="helper-text error server-error">
          {this.state.serverError}
        </p>
      </div>
    </form>}
</Form>

[triketora]

After debugging a little more, I think it's that the form doesn't know how to set errors back to empty if there were previously errors and now there aren't anymore. Perhaps it's a faulty boolean check somewhere?

[joepuzzo]

hmm can you create a code sandbox for this?

[joepuzzo]

Also i would like it if i could see your validator function

[joepuzzo]

Yeah i just double checked and this works as expected. You can see this in the example on the intro page of the docs.. i just changed it to be form level validation like you have above and it still works. Double check your validator is returning something falsey when there is no error

[triketora]

My validate function was originally this:

validate(values) {
  const errors = {};

  if (!values.preferredName) {
    errors.preferredName = "We'd like to know how to address you!";
  }

  const emailRe = /\S+@\S+\.\S+/; // anystring@anystring.anystring
  if (!values.email) {
    errors.email = 'We need an email address to set up your account.';
  } else if (!emailRe.test(values.email)) {
    errors.email = "That doesn't look like a valid email address.";
  }

  if (!values.password) {
    errors.password = 'Please enter a password.';
  } else if (values.password.length < 8) {
    errors.password = 'At least 8 characters long, please.';
  } else if (
    values.password.search(/[a-zA-Z]/) === -1 &&
    values.password.search(/\d/) === -1
  ) {
    errors.password = 'Your password needs at least 1 letter and 1 number.';
  } else if (values.password.search(/[a-zA-Z]/) === -1) {
    errors.password = 'Your password needs to have at least 1 letter.';
  } else if (values.password.search(/\d/) === -1) {
    errors.password = 'Your password needs to have at least 1 number.';
  }

  return errors;
}

Is the problem that {} is truthy? I also tried returning null but I couldn't get that to work either.

I hacked my way to a solution by replacing the last line of the validate function with:

if (Object.keys(errors).length === 0) {
    return {
      preferredName: null,
      email: null,
      password: null
    };
  } else {
    return errors;
  }

[triketora]

Thanks for looking into it!

[joepuzzo]

So if you use a validator and there are no errors you should return null for the value ... so what you are doing will work.. however it may be easier if you just have an else that sets errors.password=null. OR if you initialize errors to {preferredName: null, email: null, password: null}

[triketora]

@joepuzzo Perhaps it'd be helpful to make a note in the documentation that you need to return null if no errors? It seems unintuitive that returning {} doesn't clear out the errors. (Or, would you consider changing the behavior of the function?)

[joepuzzo]

I can look into this to see if we can update for the next release

[triketora]

Thanks @joepuzzo!

[joaoreynolds]

Agreed, a non-present object key should indicate there are no errors on that field.