Nested form submit also submits parent form

Author: MikeSuiterCreated Dec 18, 2017Updated Jan 29, 2025

First off, let me know if you prefer Stack overflow or Github for questions on redux-form.

I have a parent form that is for the data read and submitted to the server. Nested down in that form I have a dialog that is also a redux-form that does validation and a submit. This is form can be shown several times and I have the initializeValues and validation working just fine. The submit is also working just fine but the problem is the parent form also gets the submit and saves the data to the server which isn't good.

Below is my nested form and I'm wondering how I can prevent its submit from also triggering the parent's form submit? I tried getting rid of the

and having the

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

import Dialog, { DialogActions, DialogContent, DialogTitle } from 'material-ui/Dialog';
import Button from 'material-ui/Button';
import { connect } from 'react-redux';
import { Form, Field, propTypes, reduxForm } from 'redux-form';
import { withStyles } from 'material-ui/styles/index';
import { TextField } from 'redux-form-material-ui';
import Validator from 'validatorjs';
import styles from '../../Process/EditorTab-styles';

class UserDataDialog extends PureComponent {
  static propTypes = {
    ...propTypes,
    callback: PropTypes.func.isRequired,
    edit: PropTypes.bool,
    existing: PropTypes.array.isRequired,
    open: PropTypes.bool
  };

  static defaultProps = {
    edit: false,
    open: false
  };

  onSubmit = values => {
    this.props.callback(true, values);
  };

  onCancel = () => {
    this.props.callback(false);
  };

  render() {
    const { edit, handleSubmit, invalid, open } = this.props;
    const title = `${edit ? 'Update' : 'Add'} User Data`;

    return (
      <Dialog fullWidth open={open}>
        <Form onSubmit={handleSubmit(this.onSubmit)}>
          <DialogTitle>{title}</DialogTitle>
          <DialogContent>
            <Field name="name" component={TextField} label="Name" autoFocus margin="dense" fullWidth disabled={edit} />
            <Field name="value" component={TextField} label="Value" multiline rows="5" margin="dense" fullWidth />
          </DialogContent>
          <DialogActions>
            <Button onClick={this.onCancel} color="primary">
              Cancel
            </Button>
            <Button type="submit" color="primary" disabled={invalid}>
              {edit ? 'Update' : 'Add'}
            </Button>
          </DialogActions>
        </Form>
      </Dialog>
    );
  }
}

const validate = (values, props) => {
  const rules = {
    name: `required${props.edit ? `` : `|not_in:${props.existing}`}`,
    value: 'required'
  };
  const validator = new Validator(values, rules);
  validator.check();

  return validator.errors.all();
};

const mapStateToProps = (state, { data }) => {
  return {
    initialValues: data
  };
};

export default withStyles(styles, { name: 'UserDataDialog' })(
  connect(mapStateToProps)(
    reduxForm({
      enableReinitialize: true,
      form: `UserDataDialog`,
      validate
    })(UserDataDialog)
  )
);