Component validate support tag InputGroup for reactstrap

[leeseawuyhs]

This version don't support validate for tag InputGroup. How can you help me implement this component?

Thanks for you advice!

[TheSharpieOne]

We probably need an AvInputGroup component which would be the same as AvGroup except it would use InputGroup instead of FormGroup

For a current workaround, just add className="input-group" to AvGroup and it should work for you. See https://www.webpackbin.com/bins/-Ku-WfC6sh068H4Hi_nC

import React from 'react';
import { Container, InputGroup, InputGroupAddon, Button } from 'reactstrap';
import { AvForm, AvGroup, AvInput } from 'availity-reactstrap-validation';

class AvailityReactstrapValidationExample extends React.Component {
  render() {
    return (
      <Container className="py-4">
        <AvForm>
          <AvGroup className="input-group">
            <InputGroupAddon>
              <AvInput addon type="checkbox" name="checkit" aria-label="Checkbox for following text input" />
            </InputGroupAddon>
            <AvInput placeholder="Check it out" name="field" required />
          </AvGroup>
          <Button color="primary">Submit</Button>
        </AvForm>
      </Container>
    );
  }
}
export default AvailityReactstrapValidationExample

[leeseawuyhs]

Thanks for you support. I have been added class into AvGroup as your demo. But I don't see message validate response. If change AvInput with AvField then message validate response. So style broken by .input-group class use style property display: flex.

On Sep 14, 2017, at 8:56 PM, Evan Sharp notifications@github.com wrote:

We probably need an AvInputGroup component which would be the same as AvGroup except it would use InputGroup instead of FormGroup https://github.com/Availity/availity-reactstrap-validation/blob/71490a00d7d7c13b4f1cdea88f04bb9c535038e0/src/AvGroup.js#L46

[TheSharpieOne]

Bootstrap doesn't have a standard for this like they do for normal inputs. Their documentation doesn't show how to should look. That being said, just add <AvFeedback>Your message here</AvFeedback> somewhere within the AvGroup, where you want it to appear. When the field is invalid, it will display.

[leeseawuyhs]

Thanks for you support.

Add <AvFeedback>Your message here</AvFeedback> The message don’t show multi message as validate:

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'}
          }}

The message only show: Your message here (Custom message: https://github.com/Availity/availity-reactstrap-validation/issues/19)

[TheSharpieOne]

custom messages only work with AvField since AvField generates the AvFeedback. Getting the error message and validation which failed easily is something I hope to address in v2, if I ever get time to make it. Currently it is possible, but difficult and dirty (and not suggested). When a field is invalid, the custom message is stored in a context which is exposed by AvForm. You can get a ref of AvForm and access it's exposed contexts and get the message via myFormRef. getChildContext().FormCtrl. hasError[inputName] if you have a component which is a child of AvForm, you can get at the FormCtrl context via the standard contextTypes and this.context.FormCtrl

[leeseawuyhs]

Thanks for your support,

How can you help me define ref on AvForm to validate custom message?

Please advice!

On Sep 15, 2017, at 5:01 AM, Evan Sharp notifications@github.com wrote:

custom messages only work with AvField since AvField generates the AvFeedback. Getting the error message and validation which failed easily is something I hope to address in v2, if I ever get time to make it. Currently it is possible, but difficult and dirty (and not suggested). When a field is invalid, the custom message is stored in a context which is exposed by AvForm. You can get a ref of AvForm and access it's exposed contexts and get the message via myFormRef. getChildContext().FormCtrl. hasError[inputName] if you have a component which is a child of AvForm, you can get at the FormCtrl context via the standard contextTypes and this.context.FormCtrl

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Availity/availity-reactstrap-validation/issues/33#issuecomment-329621124, or mute the thread https://github.com/notifications/unsubscribe-auth/AAOuvzDLlCMy4YYjIesvt87-Uqs5Ttrlks5siaIvgaJpZM4PXMxG.

[TheSharpieOne]

Again, this is not recommended, but here you go: https://www.webpackbin.com/bins/-Ku9LfyDZvgkDfmIxrKB

[OverclockJean]

Hi TheSharpieOne, Do you have example for this

[TheSharpieOne]

@OverclockJean here is the code from the link previously posted:

import React from 'react';
import { Container, InputGroup, InputGroupAddon, Button } from 'reactstrap';
import { AvForm, AvGroup, AvInput, AvFeedback } from 'availity-reactstrap-validation';

class AvailityReactstrapValidationExample extends React.Component {
  constructor(props) {
    super(props);
    this.setFormRef = this.setFormRef.bind(this);
  }

  setFormRef(ref) {
    this.form = ref;
    if (ref) {
      const old = ref.setError;
      ref.setError = (...args) => {
        old.call(ref, ...args);
        this.forceUpdate();
      }
    }
  }

  render() {
    return (
      <Container className="py-4">
        <AvForm ref={this.setFormRef}>
          <AvGroup>
            <InputGroup>
              <InputGroupAddon>
                <AvInput addon type="checkbox" name="checkit" aria-label="Checkbox for following text input" />
              </InputGroupAddon>
              <AvInput placeholder="Check it out" name="myField" 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'}
          }} />
            </InputGroup>
            <AvFeedback>{this.form && this.form.getChildContext().FormCtrl.hasError['myField']}</AvFeedback>
          </AvGroup>
          <Button color="primary">Submit</Button>
        </AvForm>
      </Container>
    );
  }
}
export default AvailityReactstrapValidationExample

[denrolya]

@TheSharpieOne Apparently in 2019 this has changed, and the validation error message is not being shown. Could you please help me on this?