validatePristine textarea not displaying validation error

[Frank Calise]

Hi,

I'm using Form, Select and Textarea components and am having trouble getting the error message to display when the Textarea field is empty.

In my form, the Select has two values. When the second option is picked, the Textarea becomes required and and adds a validation rule for minLength. The value is currently empty

Although it does highlight the field red, nothing is displayed until I type a character and the length is still under the minimum. Am I doing something wrong here? I see in the playground example, although the required field is not set to true, the error is still displayed properly.

                     "formsy-react":  "^1.1.4",
                     "formsy-react-components":  "^1.0.0-beta.3",

<Form
  onValidSubmit={this.submitForm}
  disabled={this.props.finalized}
  onValid={this.enableSubmit}
  onInvalid={this.disableSubmit}
  validatePristine={true}
  ref={input => {
    this.myform = input
  }}
>
  <Select
    name="conclusionStatusId"
    id="conclusionStatusId"
    label="Result"
    layout="vertical"
    value={this.state.conclusion.ConclusionStatusId.toString()}
    options={conclusionNodes}
    disabled={pendingDataEntry}
    required
    onChange={this.onResultChange}
  />
  <Textarea
    rows={3}
    cols={40}
    id="comment"
    name="comment"
    label="Comment"
    layout="vertical"
    validations={{
      maxLength: 200,
      minLength: 10,
    }}
    validationError={validationError}
    value={this.state.conclusion.Comment}
    placeholder="Write a comment."
    required={this.state.isCommentRequired}
  />
</Form>

[Tim Brayshaw]

From what I can see, you're not doing anything wrong; but you have bumped into a case where formsy isn't quite flexible enough...

As you have discovered, the minLength validator doesn't flag an empty value as validation error (from the formsy docs for minLength:

Return true if the value is more or equal to argument. Also returns true for an empty value. If you want to get false, then you should use required additionally.

I think this doc is confusing and misleading.

You are setting the required prop (presumably to true!) -- so at this point I think we don't strictly have a 'validationError' to show, (but we do have a 'required field' notification to show, hence the red field).

I guess a solution would be to add a custom formsy validator that marks the empty field as invalid, which should then trigger the validationError message.

[Frank Calise]

Ah OK I didn't catch that note about the minLength.

I also tried using the isEmptyString validation formsy supplies, but seemed to run into the same issue. I then tried to add my own validation rule which you mentioned just to see, but couldn't get it working that way either.

And yes I was switching required to true at the time. So required remains true until you start typing, then it changes to false, which is where the validationError shows.

I implemented a very poor workaround for right now by dropping a space in my textarea and when the user focuses on it, selects all text (if it's a space) so as they type it removes it. Obviously not ideal. Posted here as I thought I was on the right track with the rules just wanted to double check.

So your example in the playground works because the required field is off?

[Tim Brayshaw]

I think the text you are seeing in the Playground example is from the help prop? This is shown regardless of validation errors.

[Frank Calise]

Oh you're right, I could have sworn I saw the validation message. But I just retested it and just see the help text, even with validate pristine. Must have been looking at this stuff too long hah!

Appreciate the response. Thanks for your great work.