Disable submit button in React functional component if all input fields are not completed

Question

I am new in React world, I have done a lot of research but I still have not found answer to my issue which is similar with How to conditionally disable the submit button with react-hook-form?

The problem is that my Submit button gets active if I am completing just 1 input field and I don't get why the expression {user.length < 1 && pass.length < 1 && email.length < 1 && app.length < 1} evaluate true even its not.

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { appList, apisList } from "./appList";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(0.7),
      width: "30ch"
    }
  }
}));

const submitButtonStyle = {
  marginLeft: "7px",
  marginTop: "15px",
  marginBottom: "15px"
};

function FormPage() {
  const classes = useStyles();
  // const formState = { user: '',pass: '', email: '', app: ''};
  // const [login, setLogin] = useState(formState);
  // const { user, pass, email, app, } = login;
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [email, setEmail] = useState("");
  const [app, setApp] = useState("");

  const handleUser = e => {
    setUser(e.target.value);
    console.log(user);
  };
  const handlePass = e => {
    setPass(e.target.value);
  };
  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const handleApp = e => {
    setApp(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    const login = { user: user, pass: pass, email: email, app: app };

    console.log(login);
  };

  return (
    <div>
      <form
        className={classes.root}
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
      >
        <div>
          <TextField
            required
            name="user"
            id="outlined-helperText"
            label="Integration Username"
            onChange={e => {
              handleUser(e);
            }}
            value={user}
            variant="outlined"
          />

          <TextField
            required
            name="pass"
            id="outlined-password-input"
            label="Integration Password"
            type="password"
            onChange={e => handlePass(e)}
            value={pass}
            autoComplete="current-password"
            variant="outlined"
          />
          <TextField
            required
            name="email"
            id="outlined-helperText"
            label="Email"
            value={email}
            onChange={e => handleEmail(e)}
            variant="outlined"
          />

          <TextField
            required
            name="app"
            select
            label="Select app to redirect"
            value={app}
            onChange={e => handleApp(e)}
            helperText=""
            variant="outlined"
          >
            {appList.map(app => (
              <MenuItem key={app.value} value={app.value}>
                {app.label}
              </MenuItem>
            ))}
          </TextField>
        </div>
      </form>
      <Button
        style={submitButtonStyle}
        variant="contained"
        color="primary"
        onClick={handleSubmit}
        disabled={
          user.length < 1 &&
          pass.length < 1 &&
          email.length < 1 &&
          app.length < 1
        }
      >
        Submit
      </Button>
    </div>
  );
}

export default FormPage;

score 1 · Accepted Answer · answered Dec 29 '20 at 12:18

Your expression is actually wrong. It should be:

disabled={
  user.length < 1 ||
  pass.length < 1 ||
  email.length < 1 ||
  app.length < 1
}

When any one is correct, then it should be disabled. So keep it in || comparison. In simple words, what you're checking is for error is true. Then, you're supposed to see:

If user length is less than 1
OR pass length is less than 1
OR email length is less than 1
OR app length is less than 1

If any one of those above conditions are true, then it's wrong. So you have to use || and not &&! Full code below:

import React, { useState } from "react";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { appList, apisList } from "./appList";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiTextField-root": {
      margin: theme.spacing(0.7),
      width: "30ch"
    }
  }
}));

const submitButtonStyle = {
  marginLeft: "7px",
  marginTop: "15px",
  marginBottom: "15px"
};

function FormPage() {
  const classes = useStyles();
  // const formState = { user: '',pass: '', email: '', app: ''};
  // const [login, setLogin] = useState(formState);
  // const { user, pass, email, app, } = login;
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [email, setEmail] = useState("");
  const [app, setApp] = useState("");

  const handleUser = e => {
    setUser(e.target.value);
    console.log(user);
  };
  const handlePass = e => {
    setPass(e.target.value);
  };
  const handleEmail = e => {
    setEmail(e.target.value);
  };
  const handleApp = e => {
    setApp(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();
    const login = { user: user, pass: pass, email: email, app: app };

    console.log(login);
  };

  return (
    <div>
      <form
        className={classes.root}
        noValidate
        autoComplete="off"
        onSubmit={handleSubmit}
      >
        <div>
          <TextField
            required
            name="user"
            id="outlined-helperText"
            label="Integration Username"
            onChange={e => {
              handleUser(e);
            }}
            value={user}
            variant="outlined"
          />

          <TextField
            required
            name="pass"
            id="outlined-password-input"
            label="Integration Password"
            type="password"
            onChange={e => handlePass(e)}
            value={pass}
            autoComplete="current-password"
            variant="outlined"
          />
          <TextField
            required
            name="email"
            id="outlined-helperText"
            label="Email"
            value={email}
            onChange={e => handleEmail(e)}
            variant="outlined"
          />

          <TextField
            required
            name="app"
            select
            label="Select app to redirect"
            value={app}
            onChange={e => handleApp(e)}
            helperText=""
            variant="outlined"
          >
            {appList.map(app => (
              <MenuItem key={app.value} value={app.value}>
                {app.label}
              </MenuItem>
            ))}
          </TextField>
        </div>
      </form>
      <Button
        style={submitButtonStyle}
        variant="contained"
        color="primary"
        onClick={handleSubmit}
        disabled={
          user.length < 1 ||
          pass.length < 1 ||
          email.length < 1 ||
          app.length < 1
        }
      >
        Submit
      </Button>
    </div>
  );
}

export default FormPage;

@AB These mistakes are common. You're not alone. So don't worry! You're awesome. — Praveen Kumar Purushothaman, Dec 29 '20 at 12:34

Disable submit button in React functional component if all input fields are not completed

1 Answers1