我有一个包含两个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生成的。
答案 0 :(得分:6)
目前,这在库中本身不可能(但有一种解决方法)。每个字段仅验证自身并仅更改触发验证。
没有一个很好的解决方法来实现这一点。您必须获取表单的引用,当一个输入更改时,通过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;