Redux-form、なぜ検証は実行されていませんか？

Question

私は以下の反応式を還元して1つ以上の電子メールを入力するフォームをユーザーに提供します。

何らかの理由で、検証は実行されていません。私はコンソールログを追加し、ページがロードされたときに実行されるvalidate関数しか見ない。

私が間違って実行しても検証できない原因は何ですか？

おかげ

import React from 'react'; 
import {Field, FieldArray, reduxForm} from 'redux-form' 

let renderEmailField = ({input, label, type, meta: {touched, error}}) => 
    <fieldset> 
    <label>{label}</label> 
    <div> 
     <input {...input} name="email" type="text" className="form-control" /> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </fieldset> 

let renderEmails = ({fields, meta: {submitFailed, error}}) => 
    <div> 

    {fields.map((email, index) => 
     <div className="row form-group" key={index}> 

     <div className="col-6"> 
      <Field 
      name={email} 
      component={renderEmailField} 
      label={`Email Address`} 
      /> 
     </div> 
     <div className="col"> 
      {index > 2 && 
      <a href onClick={(e) => {e.preventDefault(); fields.remove(index)}}>X</a> 
      } 
     </div> 
     <div className="col"> 
      {submitFailed && error && 
      <span className="error">{error}</span> 
      } 
     </div> 

     </div> 
    )} 

     <div className="row form-group"> 
     <div className="col"> 
      <p> 
      <a href onClick={(e) => {e.preventDefault(); fields.push()}}>Add Email</a> 
      </p> 
     </div> 
     </div> 

    </div> 

class RaterInviteForm extends React.Component { 

    handleSubmit(data) { 
    // stuff 
    } 

    render() { 

    const { submitting } = this.props 
    return (
     <div className="RaterInviteForm"> 
     <h1>Invites</h1> 
     <form className="form" onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}> 
      <FieldArray name="emails" component={renderEmails} /> 
      <div className="form-group"> 
      <button type="submit" disabled={submitting} className="btn btn-primary">Send Invitations</button> 
      </div> 
     </form> 
     </div> 
    ); 
    } 

} 

const validate = values => { 
    const errors = {} 
    console.log('validate') 
    if (!values.emails || !values.emails.length) { 
    errors.emails = {_error: 'At least one email must be entered'} 
    } 
    else { 
    let emailsArrayErrors = [] 
    if (emailsArrayErrors.length) { 
     errors.emails = emailsArrayErrors 
    } 
    } 
    return errors 
} 

RaterInviteForm = reduxForm({ 
    form: 'emailsForm', 
    initialValues: { 
    emails: ['', '', ''] 
    }, 
    validate 
})(RaterInviteForm) 
... 

Answer 1

Redux Form docs/exampleは、次の例のように行われるべきで表示されます。

submit検証機能をthis.props.handleSubmit()に、onSubmit={this.props.handleSubmit(validate)}のように渡す必要があります。

class RaterInviteForm extends React.Component { 

    render() { 

    const { submitting } = this.props 
    return (
     <div className="RaterInviteForm"> 
     <h1>Invites</h1> 
     <form className="form" onSubmit= {this.props.handleSubmit(validate)}> 
      <FieldArray name="emails" component={renderEmails} /> 
      <div className="form-group"> 
      <button type="submit" disabled={submitting} className="btn btn-primary">Send Invitations</button> 
      </div> 
     </form> 
     </div> 
    ); 
    } 

} 

const validate = values => { 
    const errors = {} 
    console.log('validate') 
    if (!values.emails || !values.emails.length) { 
    errors.emails = {_error: 'At least one email must be entered'} 
    } 
    else { 
    let emailsArrayErrors = [] 
    if (emailsArrayErrors.length) { 
     errors.emails = emailsArrayErrors 
    } 
    } 
    return errors 
} 

RaterInviteForm = reduxForm({ 
    form: 'emailsForm', 
    initialValues: { 
    emails: ['', '', ''] 
    } 
})(RaterInviteForm) 
... 

Answer 2

デフォルトでは、ぼかしイベントに対して検証が実行されます。

また、デフォルトではsubmitFailed（redux form props）はFalseに設定されています。この小道具は、検証が承認され、フォームを送信できる場合にのみ真となります。

したがって、関数をパラメータとして使用するonHandleSubmitを使用できます。 例

onSubmit={handleSubmit(validate)} 

それとも、ただこれはどういう

RaterInviteForm = reduxForm({ 
    form: 'emailsForm', 
touchOnBlur : false 
    initialValues: { 
    emails: ['', '', ''] 
    }, 
    validate 
})(RaterInviteForm) 

でこれを追加することができ、それはあなたがフォームを送信する場合にのみ、フォームを検証します。