Enable the submit button only when the form is filled(react form)-how to do it

[ajaykumar6]

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component {
constructor(props) {
super(props);

this.state = {
  fields: {},
  errors: {},
  date: {}
};

}

handleValidation() {
let fields = this.state.fields;
let errors = {};
let formIsValid = true;

//Name
if (!fields["name"]) {
  formIsValid = false;
  errors["name"] = "Cannot be empty";
}

if (typeof fields["name"] !== "undefined") {
  if (!fields["name"].match(/^[A-Za-z][a-zA-Z0-9-_.]{5,11}/)) {
    formIsValid = false;
    errors["name"] =
      "UserName cannot start with a number and must be between 5 to 11 characters";
  }
}

//Email
if (!fields["email"]) {
  formIsValid = false;
  errors["email"] = "Cannot be empty";
}

if (typeof fields["email"] !== "undefined") {
  let lastAtPos = fields["email"].lastIndexOf("@");
  let lastDotPos = fields["email"].lastIndexOf(".");

  if (
    !(
      lastAtPos < lastDotPos &&
      lastAtPos > 0 &&
      fields["email"].indexOf("@@") === -1 &&
      lastDotPos > 2 &&
      fields["email"].length - lastDotPos > 2
    )
  ) {
    formIsValid = false;
    errors["email"] = "Email is not valid";
  }
}

if (!fields["date"]) {
  formIsValid = false;
  errors["date"] = "Cannot be empty";
}

if (typeof fields["date"] !== "undefined") {
  if (new Date().getFullYear() - fields["date"].split("-")[0] < 18) {
    formIsValid = false;
    errors["date"] = "Your age must be above 18 years";
  }
}

function reset() {
  document.getElementById("contactForm").reset();
}

this.setState({ errors: errors });
return formIsValid;

}

contactSubmit(e) {
e.preventDefault();
if (this.handleValidation()) {
alert("Form submitted successfully");
} else {
alert("Form has errors.");
}
}

handleChange(field, e) {
let fields = this.state.fields;
fields[field] = e.target.value;
this.setState({ fields });
}

render() {
return (

<input
ref="name"
type="text"
size="30"
placeholder="Enter UserName"
onChange={this.handleChange.bind(this, "name")}
value={this.state.fields["name"]}
/>

          <span className="error">{this.state.errors["name"]}</span>
          <br />

          <input
            ref="email"
            type="text"
            size="30"
            placeholder="Enter The Email"
            onChange={this.handleChange.bind(this, "email")}
            value={this.state.fields["email"]}
          />

          <span className="error">{this.state.errors["email"]}</span>
          <br />
          <label>
            D O B:
            <input
              ref="date"
              type="date"
              size="30"
              onChange={this.handleChange.bind(this, "date")}
              value={this.state.fields["date"]}
            />
          </label>
          <span className="error">{this.state.errors["date"]}</span>
          <br />
        </fieldset>
      </div>

      <div className="col-md-12">
        <fieldset>
          <button className="btn btn-lg pro" id="submit" value="Submit">
            submit
          </button>
          <button
            className="btn btn-lg pro"
            id="reset"
            value="reset"
            type="reset"
            onClick="this.reset()"
          >
            Reset
          </button>
        </fieldset>
      </div>
    </form>
  </div>
);

}
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);