Validation depending on two inputs using availity-reactstrap-validation

Question

I have a form with two AvField:s, the validation rule is that either of the two fields must have a value.

The problem is that if I tab forward to b and enter a value, the validation error is only cleared for input b. See the code below:

<AvForm model={model}>
  <AvGroup>
    <Label id="aLabel" for="a">     
    </Label>
    <AvField
      type="text"
      name="a"
      validate={{ async: this.validateOneOutOfTwoHasText }} />
  </AvGroup>
  <AvGroup>
    <Label id="bLabel" for="b">     
    </Label>
    <AvField
      type="text"
      name="b"
      validate={{ async: this.validateOneOutOfTwoHasText }} />
  </AvGroup>
</AvForm>

The validator function looks like this:

validateOneOutOfTwoHasText(value, ctx, input, cb) {
  if (!ctx.a && !ctx.b) {
    return "You need to provide data in a least a or b";
  }
  return true;
}

Anyone have any clue on what I should do to trigger a revalidation of A once the validation of B is ok?

I tagged the question with jHipster beacuse the code I am working on is using was generated by jHipster 5.0.0 beta0.

Answer 1

Currently, this is not possible natively in the library (but there is a workaround). Each field only validates itself and changes only trigger validations on itself. There is not a nice workaround to get this to work. You'd have to get a ref to the form and when one input changes, trigger validation on the other input via formRef.validateInput('other-input-name'). See: https://stackblitz.com/edit/reactstrap-validation-v2-2pdjv3?file=Example.js

import React, { Component } from 'react';
import { Button, Label, FormGroup } from 'reactstrap';
import { AvForm, AvField, AvGroup, AvInput, AvRadioGroup, AvRadio, AvFeedback } from 'availity-reactstrap-validation';

const aAndOrB = (value, ctx) => {
  if (!ctx.a && !ctx.b) {
    return "You need to provide data in a least a or b";
  }
  return true;
}

class Example extends Component {
  state = {};
  onValidSubmit = (event, values) => {
    this.setState({values});
  };
  onInvalidSubmit = (event, errors, values) => {
    this.setState({errors, values});
  };
  validateA = () => {
    this.form.validateInput('a');
  }

  validateB = () => {
    this.form.validateInput('b');
  }
  render() {
    const { errors, values } = this.state;
    return (
      <div>
        <AvForm ref={c => (this.form = c)} onValidSubmit={this.onValidSubmit} onInvalidSubmit={this.onInvalidSubmit}>
          <AvField label="Label for A" name="a" validate={{myValidation: aAndOrB}} onChange={this.validateB} />
          <AvField label="Label for B" name="b" validate={{myValidation: aAndOrB}} onChange={this.validateA} />
          <Button>Submit</Button>
        </AvForm>
        <br />
        {errors && errors.length && <pre>Errors: {JSON.stringify(errors, null, 2)}</pre>}
        {values && <pre>Values: {JSON.stringify(values, null, 2)}</pre>}
      </div>
    )
  }
}

export default Example;