Disable a button when input field is empty reactjs

Question

i have a Dynamic form component. i need to disable the submit button when the input fields are empty. however the validateResult function doesn't return false.

import cn from "classnames";
import styles from "./DynamicForm.module.sass";
import { Card } from "../Card";
import { TextInput } from "../TextInput";
import { Button } from "../Button";

type DynamicInput = StringInput | NumberInput;

interface StringInput {
  type: "text";
  name: string;
  label: string;
  value?: string;
  placeholder: string;
  min: number;
  max: number;
}

interface NumberInput {
  type: "number";
  name: string;
  label: string;
  value?: number;
  placeholder: string;
  min: number;
  max: number;
}
interface DyanamicFormResult {
  [name: string]: any;
}
interface DynamicFormProps {
  data: DynamicInput[];
  onSubmit: (result: DyanamicFormResult) => void;
}
export const inputs: DynamicInput[] = [
  {
    type: "text",
    name: "Parameter1",
    label: "Parameter1",
    placeholder: "placeholder1",
    min: 2,
    max: 17,
  },
  {
    type: "number",
    name: "Parameter2",
    label: "Parameter2",
    placeholder: "placeholder2",
    min: 4,
    max: 17,
  },
];
export const DynamicForm: React.FC<DynamicFormProps> = ({ data, onSubmit }) => {
  const [result, setResult] = React.useState<DyanamicFormResult>({});

  const onClick = () => {
    onSubmit(result);
  };

  const handleChange = (attribName: string, value: any) => {
    setResult({ ...result, [attribName]: value });
  };

  const validateResult = (res) => {
    if (inputs[res] === 0) {
      return false;
    }
    return true;
  };

  return (
    <div>
      <Card title="Header" classTitle="title-blue">
        {inputs.map((input) => (
          <TextInput
            key={input.name}
            className={cn(styles.txt, TextInput)}
            type={input.type}
            name={input.name}
            value={result[input.name] || input.value}
            label={input.label}
            placeholder={input.placeholder}
            onChange={(event: any) =>
              handleChange(input.name, event.target.value)
            }
          />
        ))}
        <Button
          className={cn(styles.btn, Button)}
          label="Submit"
          variant="button"
          small={true}
          onClick={onClick}
          disabled={!validateResult(inputs)}
        />
      </Card>
    </div>
  );
};

You are passing “inputs” to validateResult as the input parameter, so then in validateResult you are effectively evaluating “inputs[inputs]”. — crosen9999
– crosen9999, Commented Jun 19, 2022 at 12:57

Hakim Abdelcadir · Accepted Answer · 2022-06-19 12:44:12Z

1

Change the validateResult function to this:

const validateResult = () : boolean => {
 if (inputs.some(input => !result[input.name])){
  return false;
 }
 return true;
};

Now you won't need to pass any argument to the function so the prop disabled will become like this:

<Button
  disabled={!validateResult()}
/>

answered Jun 19, 2022 at 12:44

Hakim Abdelcadir

1,3266 silver badges15 bronze badges

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

Comments

Mahdi Ashouri · Accepted Answer · 2022-06-19 12:25:07Z

i just write this code without run it but it should work just fix it if have a error.

import cn from "classnames";
import styles from "./DynamicForm.module.sass";
import { Card } from "../Card";
import { TextInput } from "../TextInput";
import { Button } from "../Button";

type DynamicInput = StringInput | NumberInput;

interface StringInput {
  type: "text";
  name: string;
  label: string;
  value?: string;
  placeholder: string;
  min: number;
  max: number;
}

interface NumberInput {
  type: "number";
  name: string;
  label: string;
  value?: number;
  placeholder: string;
  min: number;
  max: number;
}
interface DyanamicFormResult {
  [name: string]: any;
}
interface DynamicFormProps {
  data: DynamicInput[];
  onSubmit: (result: DyanamicFormResult) => void;
}
export const inputs: DynamicInput[] = [
  {
    type: "text",
    name: "Parameter1",
    label: "Parameter1",
    placeholder: "placeholder1",
    min: 2,
    max: 17,
  },
  {
    type: "number",
    name: "Parameter2",
    label: "Parameter2",
    placeholder: "placeholder2",
    min: 4,
    max: 17,
  },
];
export const DynamicForm: React.FC<DynamicFormProps> = ({ data, onSubmit         }) => {

  const [result, setResult] = React.useState < DyanamicFormResult > {};
  const [isDisable, setIsDisable] = React.useState < Boolean > false;
  const onClick = () => {
    onSubmit(result);
  };

  const handleChange = (attribName: string, value: any) => {
    setResult({ ...result, [attribName]: value });
  };
  useEffect(() => {
    const listOfValues = Object.values(result);
    const emptyList = listOfValues.filter((item) => item == "");
    setIsDisable(emptyList.length !== 0);
  }, [result]);

  const validateResult = (res) => {
    if (inputs[res] === 0) {
      return false;
    }
    return true;
  };

  return (
    <div>
      <Card title="Header" classTitle="title-blue">
        {inputs.map((input) => (
          <TextInput
            key={input.name}
            className={cn(styles.txt, TextInput)}
            type={input.type}
            name={input.name}
            value={result[input.name] || input.value}
            label={input.label}
            placeholder={input.placeholder}
            onChange={(event: any) =>
              handleChange(input.name, event.target.value)
            }
          />
        ))}
        <Button
          className={cn(styles.btn, Button)}
          label="Submit"
          variant="button"
          small={true}
          onClick={onClick}
          disabled={isDisable}
        />
      </Card>
    </div>
  );
};

Collectives™ on Stack Overflow

Disable a button when input field is empty reactjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related