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

同步验证的目的是显示立即问题。提交验证的目的是显示只能在服务器上发现的问题，例如＆＃34;记录已存在＆＃34;。因此，同步错误在提交错误之前会优先处理。即如果您的password字段同时包含同步和提交验证错误，则Redux表单为您提供的错误将是同步错误。

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

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

快速同步并提交验证工作。如果看起来他们不是，那么你必须做错事，但我无法从你发布的片段中确定它。

如果你真的可以在JSBin或JSFiddle中展示你的问题，那就太棒了。

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

1 个答案: