提交Redux表單驗證

Question

我有一個問題，當我將鼠標指針放到文本框中，然後刪除焦點時，它顯示驗證錯誤。我想要實現的是用戶只需提交表單或按提交按鈕即可進行驗證的時間。

這裏是我到目前爲止的代碼：

const form = reduxForm({ 
    form: 'BoardAddModalForm', 
    validate 
}); 

const renderField = field => (
    <div className="form-group"> 
     <input className={[forms.inputTextboxMd,"form-control"].join(' ')} {...field.input} type={field.type} placeholder={field.placeholder} autoComplete="off" /> 
     <div className={utils.errorText}>{field.meta.touched && field.meta.error && <span>{field.meta.error}</span>}</div> 
    </div> 
); 

function validate(formProps){ 
    const errors = {}; 

    if(!formProps.name){ 
     errors.name = "Board name is required"; 
    } 

    return errors; 
} 
class BoardAddModal extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      name: '' 
     }; 
    } 

    addBoard(formProps) { 
     this.props.dispatch(reset('BoardAddModalForm')); 
    } 

    render() { 

     const { error, handleSubmit } = this.props; 
     return (
     <Modal show={this.props.show} onHide={this.props.onHide} bsSize="small" aria-labelledby="contained-modal-title-sm"> 
      <Modal.Header closeButton> 
       <Modal.Title id="contained-modal-title-sm">Create Board</Modal.Title> 
      </Modal.Header> 
      <Modal.Body> 
       <form onSubmit={handleSubmit(this.addBoard.bind(this))}> 

        <Field name="name" component={renderField} type="text" placeholder="What are you organizing" /> 
        <button className="btn">Submit</button> 
       </form> 

      </Modal.Body> 
     </Modal> 
     ); 
    } 
} 

export default (form(BoardAddModal)); 

Answer 1

設置touchOnBlur選項false（默認情況下它是true）：

const form = reduxForm({ 
    form: 'BoardAddModalForm', 
    touchOnBlur: false 
    validate 
}); 

Docs