验证取决于使用availity-reactstrap-validation的两个输入

Question

我有一个包含两个AvField的表单,验证规则是两个字段中的任何一个都必须有值.

问题是如果我向前跳转到b并输入一个值,则仅对输入b清除验证错误.请参阅以下代码:

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

验证器函数如下所示:

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

任何人都知道如果B的验证合适,我应该怎样做才能触发A的重新验证？

我用jHipster标记了这个问题,因为我正在使用的代码是由jHipster 5.0.0 beta0生成的.

Answer 1

目前,这在库中本身是不可能的(但有一种解决方法).每个字段仅验证自身并仅更改触发验证.没有一个很好的解决方法来实现这一点.您必须获取表单的引用,当一个输入更改时,通过其他输入触发验证formRef.validateInput('other-input-name').请参阅: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;