# Form Validation

import { ValidatorForm } from "react-form-validator-core";
import TextValidator from "./FormValidation";

const [firstName, setFirstName] = useState("");
const [lastName, setLastName] = useState("");
const [userName, setUserName] = useState("");
const [password, setPassword] = useState("");

<ValidatorForm instantValidate={true} onSubmit={handleFormSubmit}>
  <div className="row clearfix">
    <div className="col-xl-6">
      <TextValidator
        onChange={(e) => setFirstName(e.target.value)}
        name="firstName"
        value={firstName}
        validators={["required"]}
        errorMessages={["This field is required"]}
        className={"form-control"}
        label={"First name"}
        require="true"
      />
    </div>
    <div className="col-xl-6">
      <TextValidator
        onChange={(e) => setLastName(e.target.value)}
        name="lastName"
        value={lastName}
        validators={["required"]}
        errorMessages={["This field is required"]}
        className={"form-control"}
        label={"Last name"}
      />
    </div>
  </div>
  <div className="row">
    <div className="col-md-10 ">
      <TextValidator
        onChange={(e) => setUsername(e.target.value)}
        name="website"
        value={userName}
        type="text"
        validators={["required"]}
        errorMessages={["This field is required"]}
        className={"form-control error"}
        label={"Pages username"}
        placeholder="http://pages-ui.com/projectname"
      />
    </div>
    <div className="input-pages-text col-md-2">
      <span className="">@pages.com</span>
    </div>
  </div>
  <div className="row">
    <div className="col-md-12">
      <TextValidator
        onChange={(e) => setPassword(e.target.value)}
        name="password"
        value={password}
        type="password"
        validators={["required"]}
        errorMessages={["This field is required"]}
        className={"form-control"}
        label={"Password"}
        placeholder="Minimum of 4 characters."
      />
    </div>
  </div>
  <div className="row">
    <div className="col-md-12">
      <TextValidator
        onChange={(e) => changeEmail(e.target.value)}
        name="email"
        value={email}
        type="email"
        validators={["required"]}
        errorMessages={["This field is required"]}
        className={"form-control"}
        label={"Email"}
        placeholder="[email protected]"
      />
    </div>
  </div>
  <div className="clearfix"></div>
  <div className="row m-t-25">
    <div className="col-xl-6 p-b-10">
      <p className="small-text hint-text">
        By clicking the "Get Started!" button, you are creating a Pages account,
        and you agree to Pages's
        <a href="#">Terms of Use</a> and <a href="#">Privacy Policy</a>.
      </p>
    </div>
    <div className="col-xl-6">
      <button
        aria-label=""
        className="btn btn-primary pull-right btn-lg btn-block"
        type="submit"
      >
        Get Started
      </button>
    </div>
  </div>
</ValidatorForm>;

import { ValidatorForm } from "react-form-validator-core";
import WithoutMsgValidation from "../FormLayouts/WithoutMsgValidation";

const [shippingName, setShippingName] = useState("");
const [shippingEmail, setShippingEmail] = useState("");
const [formState, setFormState] = useState(true);

<ValidatorForm
  instantValidate={true}
  ref={(r) => setFormState(r)}
  onSubmit={handleFormSubmit}
>
  <p>Name and Email Address</p>
  <div className="form-group-attached">
    <div className="row clearfix">
      <div className="col-sm-6">
        <WithoutMsgValidation
          onChange={(e) => setShippingName(e.target.value)}
          name="firstName"
          value={shippingName}
          validators={["required"]}
          errorMessages={["This field is required"]}
          className={"form-control"}
          label={"First Name"}
          require="true"
        />
      </div>
      <div className="col-sm-6">
        <div className="form-group form-group-default">
          <label>Last name</label>
          <input type="text" className="form-control" />
        </div>
      </div>
    </div>
    <WithoutMsgValidation
      onChange={(e) => setShippingEmail(e.target.value)}
      name="email"
      value={shippingEmail}
      validators={["required", "isEmail"]}
      errorMessages={["This field is required"]}
      className={"form-control"}
      label={"Email"}
      require="true"
    />
  </div>
</ValidatorForm>;