Getting This field is invalid message when using AvField validate

[diegodesouza]

Hi I'm trying to use the AvField and validate that the number i pass in is not less than 2 like this.

 <AvField
    name="manyClaims"
     maxLength={3}
     onChange={this.handleChange}
     validate={{
        minNumber: (value) => {
             return parseInt(value) <= 2 ? 'Enter a value greater than 2.' : '';
      },
      pattern: {
          value: '^(?!0)((1{3,9})|[3-9]|\d{0,3}|[0-9][0-9][0-9])$',
           errorMessage: 'Enter a valid number.'
       },
    }}
/>

I'm confused to what I'm doing wrong.

[GoPro16]

I think if you add a type prop it will force the number to be an actual number and not a string which would probably be easier to handle in this case unless you are dealing with something like an NPI where it needs to be a string.

type="number"

[diegodesouza]

Funny you mentioned that, before i saw your comment I have tried that. @GoPro16 unfortunately that didn't do it

[diegodesouza]

@GoPro16

[diegodesouza]

that is with type="number"

[GoPro16]

Try changing empty string to something like undefined. I think since you are returing an empty string the value is truthy which means its still invalid and thus rendering the default error message.

[diegodesouza]

                  <AvField
                    type="number"
                    name="manyClaims"
                    maxLength={3}
                    onChange={this.handleChange}
                    validate={{
                      custom: (value) => {
                          return value <= 2 && 'Enter a value greater than 2.';
                      }
                    }}
                  />

tried this also and nothing

[diegodesouza]

                  <AvField
                    type="number"
                    name="manyClaims"
                    maxLength={3}
                    onChange={this.handleChange}
                    validate={{
                      custom: (value) => {
                      if (!value) return true;
                      return Number(value) <= Number(2) ? 'Enter a value greater than 2' : true;
                      },
                    }}
                  />

For anyone that might have encountered the same issue.

[TheSharpieOne]

strings have lengths (minLength / maxLength), numbers just have a min and max value (min / max). This is shown in the docs and is based on HTML5 input validation attributes. https://availity.github.io/availity-reactstrap-validation/components/validators/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/min https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max

[diegodesouza]

@TheSharpieOne That's a fair point, but should the number of digits be limited to the number we enter in max={3} or max="3" ?

[diegodesouza]

What i see is that the use can enter as many digits even thought i want to limit it to say 3, like with text maxLength. Unless I'm missing the way the input works with number

[TheSharpieOne]

If you wanted to limit the number to 3 digits, max={999} should work (although "numbers" padded with "0" (like 0123) would still be valid and the value would be 123 (the "0" would go away)). If you wanted to limit the number to a max value of 3, max={3} should work. Also string vs int/number doesn't matter. max="3" vs max={3} is the same, if it is a string, we parseInt it

[diegodesouza]

@TheSharpieOne please take a look at this, https://stackblitz.com/edit/react-afkpmo the validation will kick in if the digits are greater than 3 in length, but wont stop the user from entering as many as they want. Is that the expected behaviour?

[TheSharpieOne]

Yes, that is expected. This library never stops the user from entering invalid values. The invalid values will trigger the validation messages and submitting the form with invalid values will not trigger the onValidSubmit.

maxLength will stop the user from entering more than the allowed amount... but that is not done by this library, it is handled by the browser. We cannot prevent it. One downside to preventing the user from entering the value they want to enter is that the field will not be invalid and thus not let the user know the value they entered is invalid. By this I mean, if you enter "1000" in a field with a maxLength of 3, the value will be "100"... and the user may not notice that (again, this is the browser's implementation and nothing that this library can address.) They will submit the completely valid form... but with a value they did not intend.

[diegodesouza]

@TheSharpieOne gotcha, I didn't know that the value would be sent in as if it was trimmed.