react enable button after all form fields are not empty

Question

hey guys new to react trying to achieve some simply validation but struggling. i want to

• disable button if form fields are empty
• enable button if ALL form fields are filled

i want to do all of this on the fly but been struggling/ cant find anything solid for a reference. here is my code

import React from 'react';
//import ReactDOM from 'react-dom';
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';

export default class Forms extends React.Component {
  constructor() {
    super();
    this.state = {
      fname: '',
      lname: '',
      email: '',
      password: '',
      confirmPassword: '',
      formSuccess: false
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleUserInput(e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({ [name]: value });
  }

  handleSubmit(e) {
    e.preventDefault();
  }

  render() {
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormGroup>
          <Label for="fname">First Name</Label>
          <Input
            value={this.state.fname}
            onChange={(event) => this.handleUserInput(event)}
            type="text"
            name="fname"
            id="fname"
            placeholder="first name"
          />
        </FormGroup>
        <FormGroup>
          <Label for="lname">Last Name</Label>
          <Input
            onChange={(event) => this.handleUserInput(event)}
            value={this.state.lname}
            type="text"
            name="lname"
            id="lname"
            placeholder="last name"
          />
        </FormGroup>
        <FormGroup>
          <Label for="email">Email</Label>
          <Input
            onChange={(event) => this.handleUserInput(event)}
            value={this.state.email}
            type="email"
            name="email"
            id="email"
            placeholder="email"
          />
        </FormGroup>
        <FormGroup>
          <Label for="password">Password</Label>
          <Input
            onChange={(event) => this.handleUserInput(event)}
            type="password"
            value={this.state.password}
            name="password"
            id="password"
            placeholder="password"
          />
        </FormGroup>
        <FormGroup>
          <Label for="confirmPassword">Confirm Password</Label>
          <Input
            onChange={(event) => this.handleUserInput(event)}
            value={this.state.confirmPassword}
            type="password"
            name="confirmPassword"
            id="confirmPassword"
            placeholder="confirm password"
          />
        </FormGroup>
        <FormGroup check>
          <Label check>
            <Input type="checkbox" />{' '}
            Check me out
        </Label>
        </FormGroup>
        <Button color="primary" size="lg" disabled={!this.state.formSuccess}>Submit</Button>
      </Form>
    )
  }
}

thanks for all the help

Answer 1

Add a function to your component like so:

isFormValid = () => {
  const {fname, lname, email, password, confirmPassword} = this.state

  return fname && lname && email && password && confirmPassword
}

and then change your button to be:

<Button color="primary" size="lg" disabled={!this.isFormValid}>Submit</Button>

This way you don't even need the formSuccess in your state.

Answer 2

Working codepen: https://codesandbox.io/s/yjn2zz4qvj

Code:

import React, { Component } from "react";

export default class Hello extends Component {
  state = {
    email: "",
    name: ""
  };

  handleChange = e => {
    const { value, name } = e.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <div>
        <form className="col-md-5">
          <div className="form-group">
            <label> Email: </label>
            <input
              name="email"
              value={this.state.email}
              placeholder="email"
              onChange={this.handleChange}
            />{" "}
            <br />
          </div>
          <div className="form-group">
            <label> Name: </label>
            <input
              name="name"
              value={this.state.name}
              placeholder="name"
              onChange={this.handleChange}
            />
          </div>
          <button
            type="button"
            disabled={!this.state.email || !this.state.name}
          >
            Button
          </button>
        </form>
      </div>
    );
  }
}