How add custom errors messages ?

Hi,

How handle custom errors message ?

Let’s say we have a unsername filed : <AvGroup> <Label for="username">UserName</Label> <AvInput name="username" id="username" required minLength="6" maxLength="16" validate={{pattern: {value: '^[A-Za-z0-9]+$'}}} /> <AvFeedback>UserName is not valid</AvFeedback> </AvGroup>

I want to have errors like

• “Your username must be between 6 and 16 characters”
• “Your username must be composed only with letter and numbers”

How I easly do this with this lib ?

[TheSharpieOne]

See this demo: https://stackblitz.com/edit/availity-reactstrap-validation-72-uu2ayn?file=Example.js preview:

Here is the code:

import React from 'react';
import { Container } from 'reactstrap';
import { AvForm, AvField } from 'availity-reactstrap-validation';

class AvailityReactstrapValidationExample extends React.Component {
  render() {
    return (
      <Container className="py-4">
        <AvForm>
          <AvField name="username" label="Username" validate={{
              required: {value: true, errorMessage: "Please enter a username"},
              pattern: {value: '^[A-Za-z0-9]+$', errorMessage: 'Your username must be composed only with letter and numbers'},
              minLength: {value: 6, errorMessage: 'Your username must be between 6 and 16 characters'},
              maxLength: {value: 16, errorMessage: 'Your username must be between 6 and 16 characters'}
          }} />
          
          <AvField name="password" label="Password" type="password" required
            errorMessage="This error message is generic and gets overriden by the ones provided in the validate prop as those are more specific to a particular validation"
            validate={{
              pattern: {value: '^[A-Za-z0-9]+$', errorMessage: 'Your username must be composed only with letter and numbers'},
              minLength: {value: 6, errorMessage: 'Your username must be between 6 and 16 characters'},
              maxLength: {value: 16, errorMessage: 'Your username must be between 6 and 16 characters'}
          }} />
        </AvForm>
      </Container>
    );
  }
}
export default AvailityReactstrapValidationExample

[AbhaysinghBhosale]

i think reported issue is for AvInput instead of using AVField because in my case i want to attach copy icon with field but with av field that is not possible