enable button after the user fill all the fields and validation

Question

I have a problem with disable button. I want to allowed to the user send the form only if all the fills are full. But the problem is evrytime I fill only one fill its enable the button and let the user send the form without a problem. In addition it's cancel the validation. How I fix all these problems? Thank you.

class Contact extends Component {
  constructor(props) {
    super(props);

    this.state = {
      name: "",
      email: "",
      phone: "",
      group1: "",
      remarks: "",
    };
  }

  handleChange = (event) => {
    this.setState({ name: event.target.value });
    this.setState({ email: event.target.value });
    this.setState({ phone: event.target.value });
    this.setState({ group1: event.target.value });
    this.setState({ remarks: event.target.value });
  };

  state = {};
  render() {
    return (
      <React.Fragment>
        <PageHeader title="צור קשר" />
        <Form>
          <Form.Group className="mb-3 col-4" controlId="formBasicName">
            <Form.Label className="FormLabelName">:שם*</Form.Label>
            <Form.Control
              className="FormNameControl"
              type="text"
              placeholder="הכנס שם"
              required
              name="name"
              onChange={this.handleChange}
            />
          </Form.Group>
          <Form.Group className="mb-3 col-4" controlId="formBasicEmail">
            <Form.Label className="FormLabelMail">:מייל*</Form.Label>
            <Form.Control
              className="formControlEmail"
              type="email"
              placeholder="הכנס מייל"
              required
              name="email"
              onChange={this.handleChange}
            />
          </Form.Group>
          <Form.Group className="mb-3 col-4" controlId="formBasicPhone">
            <Form.Label className="FormLabelPhone">:טלפון*</Form.Label>
            <Form.Control
              className="FormPhoneControl"
              type="tel"
              placeholder="הכנס לפי הפורמט: XXX-XXX-XXXX"
              pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
              title="יש לכתוב לפי הפורמט המתאים, לדוגמה: 050-000-0000"
              required
              name="phone"
              onChange={this.handleChange}
            />
            <Form.Text className="text-muted"></Form.Text>
          </Form.Group>
          <Form.Label className="FormLabelSelect">
            :בחר דרך ליצירת קשר*
          </Form.Label>
          {["radio"].map((type) => (
            <div key={`inline-${type}`} className="mb-3">
              <Form.Check
                inline
                label="מייל"
                name="group1"
                type={type}
                id={`inline-${type}-1`}
                className="radio"
                onChange={this.handleChange}
              />
              <br />
              <Form.Check
                inline
                label="טלפון"
                name="group1"
                type={type}
                id={`inline-${type}-2`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="סמס"
                name="group1"
                type={type}
                id={`inline-${type}-3`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="ווטאספ"
                name="group1"
                type={type}
                id={`inline-${type}-4`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="לא משנה"
                name="group1"
                type={type}
                id={`inline-${type}-5`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="אחר"
                name="group1"
                type={type}
                id={`inline-${type}-6`}
                className="radio"
              />
            </div>
          ))}
          <p className="remark">
            במידה ואתם מסמנים אחר יש לפרט בתוכן ההודעה את האמצעי ליצירת הקשר*
          </p>
          <Form.Label className="FormLabelSelect2">
            :בחר את נושאי הפנייה*
          </Form.Label>
          {["checkbox"].map((type) => (
            <div key={`inline-${type}`} className="mb-3">
              <Form.Check
                inline
                label="תקלה טכנית"
                name="group1"
                type={type}
                id={`inline-${type}-1`}
                className="radio"
                onChange={this.handleChange}
              />
              <br />
              <Form.Check
                inline
                label="הזמנה"
                name="group1"
                type={type}
                id={`inline-${type}-2`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="הצעות לשיפור"
                name="group1"
                type={type}
                id={`inline-${type}-3`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="שאלות"
                name="group1"
                type={type}
                id={`inline-${type}-4`}
                className="radio"
              />
              <br />
              <Form.Check
                inline
                label="אחר"
                name="group1"
                type={type}
                id={`inline-${type}-6`}
                className="radio"
              />
            </div>
          ))}
          <Form.Label className="FormLabelRemarks">:תוכן הפנייה*</Form.Label>
          <textarea
            className="FormRemarksControl"
            value={this.state.value}
            onChange={this.handleChange}
            required
            name="remarks"
            id="user_msg"
            cols="25"
            rows="5"
            placeholder="הכנס כאן את פנייתך"
          />
          <br />

          <Button
            className="buttonSend"
            variant="primary"
            type="submit"
            disabled={
              !this.state.name &&
              !this.state.email &&
              !this.state.phone &&
              !this.state.group1 &&
              !this.state.remarks
            }
            href="/send"
          >
            שלח
          </Button>

Answer 1

I would suggest using state for enabling or disabling the button. And also check for all the field values inside the handleChange function.

this.state = {
  name: "",
  email: "",
  phone: "",
  group1: "",
  remarks: "",
  disableButton: true,
};

handleChange = (event) => {
  this.setState({ name: event.target.value });
  this.setState({ email: event.target.value });
  this.setState({ phone: event.target.value });
  this.setState({ group1: event.target.value });
  this.setState({ remarks: event.target.value });
  if(this.state.name && this.state.email && this.state.phone && this.state.group1 && this.state.remarks ) {
    this.setState({ disableButton: false })
  }
};

<Button
  className="buttonSend"
  variant="primary"
  type="submit"
  disabled={this.state.disableButton}
  href="/send"
>
  ???
</Button>