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 (

<form name="contactform" className="contactform" id="contactForm" onSubmit={this.contactSubmit.bind(this)} ref="form" > <div className="col-md-6">

<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(<App />, rootElement);