Using Redux Form, how can I disable the submit button if no fields have been filled out?

Question

I'm using Redux Form v.7.1.2 and am trying to have the submit button disabled initially. When the user activates the change or keyup events, I want the form to check if ANY of the form fields within the form have any value. If so, I want the submit button to become enabled. I don't have any fields required. I just need to make sure that at least one of them has a value filled in.

I have achieved this in jQuery:

// Change disabled attribute on search box submit button depending on if there is a value in any field
  $searchFormFields.on('change keyup', function() {
    $('#search-box-search-btn').prop('disabled', true);
    $searchFormFields.each(function() {
      if ($(this).val().length > 0) {
        $('#search-box-search-btn').prop('disabled', false);
        return false; // break the loop
      }
    });
  });

I am converting the site to use React and Redux now though, and I have absolutely no idea where to begin trying to get this to work. Any ideas?

Answer 1

If you just want to check that no fields have been filled out, you can use the following line:

<button type="submit" disabled={this.props.pristine}>Submit</button>

pristine is a prop that redux-form adds that you can reference if the form has not had any fields filled out. You can check out more in their API Docs . It is comparing the current form values to the initial values on the form.

It turns out I actually needed to disable the button if the form had not been changed since the last submit .

In order to check for that condition, you can assign the current values as the initial values when submitting the form. Then when determing if a form is pristine , redux-form will compare any current values to the last initial values that were set on the latest submit.

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

class SearchFilters extends Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(values) {
    // Check if the form values have changed since the last submit
    // The dirty boolean (signifies if the form has changed from its initial values) is established by redux-form by comparing the currently entered values to the initial form values
    // After we identify the form as having been changed, we will send the new form values to replace the original initial form values so redux-form is always comparing the current form values against the last submitted form values
    if (this.props.dirty) {
      // Set the initial values for the form on the redux store (This is used by redux form to compare the current values to the initial values so we can determine if there are new values since the last submit)
      this.props.initialize(values);
    }
  }

  renderField(field) {
    return (
      <div className="search-parameter">
        <input type="text" {...field.input} />
      </div>
    );
  }

  render() {
    const { handleSubmit, submitting, invalid } = this.props;

    return (
      <form onSubmit={handleSubmit(this.onSubmit)} >
        <Field
          component={this.renderField}
          key="keyword"
          name="keyword"
        />
        <Field
          component={this.renderField}
          key="type"
          name="type"
        />
        <button
          type="submit"
          disabled={submitting || pristine || invalid}
        >
          Search
        </button>
      </form>
    );
  }
}

export default reduxForm({
  validate,
  form: 'SearchFiltersForm',
})(connect(mapStateToProps, null)(SearchFilters));