I have the following react redux-form below to provide the user with a form to enter one or more emails.
For some reason, validate is not being run onSubmit. I added a console log and only see the validate function being run when the page is loaded.
What am I doing wrong to cause validate not to run onSubmit?
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)
...
The Redux Form docs/example show it should be done like the following example.
You should pass your submit
validation function to this.props.handleSubmit()
, as in 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)
...