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表單 - 在同一表單中同步並提交驗證

回答

相關問題