CODEWITHSUNDEEP
reactjsvalidationreactstrap
simonk83
simonk83

Reputation: 89

Using Reactstrap and/or availity-reactstrap-validation with an AvField is it possible to display the green "valid" box when a valid item is entered?

Right now, using this:

                        <AvField name="name" label="Name (default error message)" type="text" errorMessage="Invalid name" validate={{
                        required: {value: true},
                        pattern: {value: '^[A-Za-z0-9]+$'},
                        minLength: {value: 6},
                        maxLength: {value: 16}
                    }} />

It'll display the red outline and danger mark if the pattern doesn't match, which is great, but I'd also ideally like it to show the green outline and check mark when the pattern does match. Is that actually an option?

Thanks!!!

Upvotes: 1

Views: 1484

Answers (1)

dev patel
dev patel

Reputation: 1

there is one prop which is 'valid' if the input is valid then avField will automatically change the color to green.

ex:

<AvField
  name="name"
  label="Name (default error message)"
  type="text"
  errorMessage="Invalid name"
  validate={{
    required: { value: true },
    pattern: { value: '^[A-Za-z0-9]+$' },
    minLength: { value: 6 },
    maxLength: { value: 16 }
  }}
  valid
/>

Upvotes: 0

Related Questions