Redux 表单 - 在同一表单内同步和提交验证

Question

我想同时使用 redux 表单的提交和同步验证。同时只使用其中一个是可行的，但是当我同时使用两者时，同步验证似乎覆盖了提交验证的结果。

export default class MyForm extends Component{
    render() {
        ...
        return (
            ...<form>
                  <Button onClick={handleSubmit(submit)}>Submit</Button>
               </form>...
        )
    }
}

我的提交验证如下所示:

const submit = (values, dispatch) => {
    return new Promise((resolve, reject) =>
    {
        setTimeout(() => {
            reject({ Password: 'Wrong password', _error: 'Login failed'})
            console.log("rejected");
    }, 1000) // simulate server latency
})}

现在我也想添加同步验证，所以我也添加了validate:

let myForm = reduxForm({
    ...  
    validate: validateForm
})(MyForm);

看起来像下面这样(为了缩短)

const validateForm = function(values){
    let errors = {} 
    if(values.Password == "notAllowed"){
        errors.Password = "this is not allowed"
    }

    console.log("validated sync", errors);

    return errors;
}

当我现在在密码框中输入内容并点击提交时，我可以看到如下内容:

• “验证同步”，...
• (点击提交)
• (一秒后):被拒绝*
• (在那之后立即): 验证同步。

我可以看到同步验证的错误，但看不到提交验证的错误(显然是因为它被上面的控制台输出覆盖了)。有没有办法将这两者结合起来？我想要实时验证和服务器端验证。

Answer 1

同步验证的目的是显示即时问题。提交验证的目的是显示只能在服务器上发现的问题，例如“记录已经存在”。因此，同步错误优先于提交错误。即，如果您的 password 字段同时存在同步和提交验证错误，则 Redux Form 给您的错误将是同步错误。

此外，Redux Form 在每次渲染时运行同步验证。因此，不要担心从同步验证功能中看到控制台打印输出。

你提议的事情不会发生，因为如果同步验证失败，Redux Form 将不会提交你的表单。所以他们真的不能碰撞。此外，特定字段的提交错误在 CHANGE 时被清除，因此一旦您去编辑该值，您将只会看到同步错误。

同步和提交验证一起愉快地工作。如果看起来不是，那么你一定做错了什么，但我无法从你发布的片段中确定。

如果您真的可以在 JSBin 或 JSFiddle 中演示您的问题，那就太好了。