I am trying to make form with submit validation. When I submit form, my handleSubmit fired and throw SubmissionError, but nothing happens any more.

Submit (just throw error every time):

function submit(values)
{
   console.log(values);
   throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}

Render field from example:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
     <input {...input} placeholder={label} type={type}/>
     {touched && error && <span>{error}</span>}
   </div>
  </div>
 )

My form:

class LoginForm extends Component {
  render()
  {
    const {  error, handleSubmit, pristine, reset, submitting  } = this.props
    console.log(error);
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Login</h1>
          <Field name="email" type="text" ponent={renderField} label="Username"/>
          <Field name="password" type="text" ponent={renderField} label="Username"/>
           {error && <strong>{error}</strong>}
          <button type = "submit">Login</button>
        </form>
      </div>
     )
  }
}

LoginForm = reduxForm({
    form: 'login',
    onSubmit: submit
})(LoginForm);

export default LoginForm;

When I press Submit, the submit function is called, exception is thrown, but nothing happens else and errors message in form and renderField not shown.

I am trying to make form with submit validation. When I submit form, my handleSubmit fired and throw SubmissionError, but nothing happens any more.

Submit (just throw error every time):

function submit(values)
{
   console.log(values);
   throw new SubmissionError({ password: 'Wrong password', _error: 'Login failed!' });
}

Render field from example:

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
     <input {...input} placeholder={label} type={type}/>
     {touched && error && <span>{error}</span>}
   </div>
  </div>
 )

My form:

class LoginForm extends Component {
  render()
  {
    const {  error, handleSubmit, pristine, reset, submitting  } = this.props
    console.log(error);
    return (
      <div>
        <form onSubmit={handleSubmit}>
          <h1>Login</h1>
          <Field name="email" type="text" ponent={renderField} label="Username"/>
          <Field name="password" type="text" ponent={renderField} label="Username"/>
           {error && <strong>{error}</strong>}
          <button type = "submit">Login</button>
        </form>
      </div>
     )
  }
}

LoginForm = reduxForm({
    form: 'login',
    onSubmit: submit
})(LoginForm);

export default LoginForm;

When I press Submit, the submit function is called, exception is thrown, but nothing happens else and errors message in form and renderField not shown.

• javascript
• reactjs
• redux
• redux-form

• 1 I guess you know this example: redux-form./6.0.0-alpha.11/examples/submitValidation I am wondering, why you put the line "onSubmit: submit" in the reduxForm call. You already defined handleSubmit in the form's onSubmit attribute. – pwagner Commented Sep 16, 2016 at 12:49
• Maybe I can t understand this tutorial. I use this.props.handleSubmit, but how I should pass my submit function to the ponents props? – Alexey Markov Commented Sep 16, 2016 at 13:42
• 1 Can you add the code of the LoginForm ponent being used? It should look similar to this: <LoginForm handleSubmit={submit} /> – pwagner Commented Sep 16, 2016 at 13:50
• 1 Try removing touched && from renderField -> then only it will show error without you touch it – Raj Adroit Commented Sep 16, 2016 at 14:15
• I do some changes: <LoginForm onSubmit={submit}/> but validaton errors still not shown. If I use <LoginForm handleSubmit={submit}/> I've got submit validation is failed (yes, I need this!), but It makes request ?email=xxx&password=xxx to my server and page reloads (I don't need this) – Alexey Markov Commented Sep 16, 2016 at 16:36

2 Answers 2

A throwable error that is used to return submit validation errors from onSubmit. The purpose being to distinguish promise rejection because of validation errors from promise rejection because of AJAX I/O problems or other server errors. docs

So, the purpose of SubmissionError is not to directly throw an error. Use this when you are doing some promise like API request i.e.

  return axios
     .post('/sessions/login', values)
     .then((res) => {
           // do something with response
     })
     .catch((err) => {
           throw new SubmissionError(err.response.data);
     });

You need to add a validation method to the reduxForm constructor like the following:

function validateInput(input) {
  let errors = {}

  if (!data.email) {
    errors.email = "Email is required."
  } 

  if (!data.password) {
    errors.password = "Password is required."
  }

  return errors 
}

const loginForm = reduxForm({
  form: 'login',
  onSubmit: submit,
  validate: validateInput
})

This will cause redux-form to show the errors under the input field if they are not valid.

Of course you need to connect your ponent with react-redux connect for this to work like this:

export default connect(mapStateToProps)(loginForm(LoginForm))