Redux表单 - 在同一表单中同步并提交验证

我想同时使用对redux表单的提交和同步验证。同时使用它们中的一个可以工作，但是当我将它们一起使用时，它看起来像同步验证会覆盖提交验证的结果。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; 
}

现在当我进入密码箱东西，并点击提交，我可以看到类似以下内容：

“验证同步”，...
（点击提交）
（后一秒）：拒绝*
（紧随其后）：已验证的同步。

我可以看到来自同步验证的错误，但没有来自提交验证的错误（显然是因为它被上面的控制台输出覆盖）。有什么方法可以将这两者结合起来？我想要现场验证和服务器端验证。

来源

2016-08-02 ElGauchooo

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

另外，Redux Form在每个渲染器上运行同步验证。所以不要担心看到来自同步验证功能的控制台打印输出。

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

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

如果你真的可以在JSBin或JSFiddle中展示你的问题，那将会很棒。

来源

2016-08-03 08:37:05

“您提议的事情不会发生，因为如果同步验证通过，Redux表单将不会提交您的表单。“ - 你的意思是”如果同步验证失败。“@ erik-r？ –

是的，如果同步验证失败，它不会调用你的提交函数 –

@ErikR。我遇到了同样的问题。这可能会导致一个通用的服务器错误，我想将其设置为_error字段。错误在提交后被覆盖，那么保留此错误的最佳策略是什么？ – gcedo

Redux表单 - 在同一表单中同步并提交验证

回答

相关问题