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

I dont see formSuccess value being anywhere. Do you want to disable the button if all fields are empty ? — Johnson Samuel
– Johnson Samuel, Commented May 25, 2018 at 4:25
@johnsam my goal is to only let the user submit the form when all fields are filled using formSuccess — hello world
– hello world, Commented May 25, 2018 at 4:27
please check the working codepen link and also the code I have shared :).. Let me know if that works. — Johnson Samuel
– Johnson Samuel, Commented May 25, 2018 at 6:32

Alex Dovzhanyn · Accepted Answer · 2018-05-24 19:45:38Z

8

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.

answered May 24, 2018 at 19:45

Alex Dovzhanyn

1,0466 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

hello world Over a year ago

hmm just tried your code and doesnt work like how i imagined

Alex Dovzhanyn Over a year ago

whats the issue?

hello world Over a year ago

can u post a codepen or something? im calling isFormValid() in my handleuserinput function

Alex Dovzhanyn Over a year ago

@helloworld Dont call isFormValid(), if you do so, it'll immediately execute the function once per component render. what you want to do is pass it in without the parentheses, like I did in my example above, and make note of the ! operator before the function call

luckyging3r Over a year ago

@Ajay because it's not the code I deserve, but the one I need right now 🦇

|

Ganesh Sanap - MVP · Accepted Answer · 2021-01-28 15:35:58Z

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>
    );
  }
}

edited Jan 28, 2021 at 15:35

Ganesh Sanap - MVP

2,2901 gold badge12 silver badges22 bronze badges

answered May 25, 2018 at 6:31

Johnson Samuel

2,0862 gold badges20 silver badges33 bronze badges

1 Comment

hello world Over a year ago

can you elaborate on disabled={!this.state.email || !this.state.name} i thought react has issues updating the state? sorry if this a noob question, still learning react

Lucas Milotich · Accepted Answer · 2018-05-24 20:47:40Z

1

You should have a state called isAvailable or something like this and you should use it in the button like this:

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

And then, in the function handleUserInput you should update that state:

`handleUserInput(e) {
    const name = e.target.name;
    const value = e.target.value;
    this.setState({ name: value, isAvailable: true });
  }`

answered May 24, 2018 at 20:47

Lucas Milotich

3983 silver badges16 bronze badges

2 Comments

hello world Over a year ago

the button should only disable when all the form fields are field, your solution doesnt work...

Johnson Samuel Over a year ago

What do you mean by 'all the form fields are field' ??

Aiyegbajeje Yusuf · Accepted Answer · 2023-08-16 00:39:03Z

Here is an approach i used to clear off the issue to make sure all inputs are valid before the button enables

  const [firstName, setFirstName] = useState("");
  const [lastName, setLastName] = useState("");
  const [email, setEmail] = useState("");
const [password, setPassword] = useState({
    value: "",
    isTouched: false,
  });
  const [role, setRole] = useState("role");
  const [Valid, setValid] = useState(false);

  const getIsFormValid = () => {
    if (firstName && email && password?.length && validateEmail(email)) {
      setValid(true);
    } else {
      setValid(false);
      return false;
    }
  };
  
  return(
  
  
    <button type="submit" disabled={!Valid}>
            Create account
          </button>
  )

Javad Khodadadi · Accepted Answer · 2018-05-25 06:24:12Z

-1

You can use react-validation If all validation is true button is enable

answered May 25, 2018 at 6:24

Javad Khodadadi

4081 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

react enable button after all form fields are not empty

5 Answers 5

9 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

9 Comments

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related