Validate Tab

You can validate the tabs by adding the isValid prop to the TabContent component. The isValid prop accepts a boolean value. If the value is true, the tab will be validated. If the value is false, the tab will not be validated.

Also you can add validationError prop to the TabContent component. The validationError prop accepts a function. If isValid is false, the function will be called.

Code


import React from "react";
import FormWizard from "react-form-wizard-component";
import "react-form-wizard-component/styles.css";

export default function FormWizardSample() {
  const [firstTabInput, setFirstTabInput] = React.useState<string>("");
  const handleComplete = () => {
    console.log("Form completed!");
    // Handle form completion logic here
  };
  // check validate tab
  const checkValidateTab = () => {
    console.log(firstTabInput);
    if (firstTabInput === "") {
      return false;
    }
    return true;
  };
  // error messages
  const errorMessages = () => {
    // you can add alert or console.log or any thing you want
    alert("Please fill in the required fields");
  };

  return (
    <>
      <FormWizard onComplete={handleComplete}>
        <FormWizard.TabContent title="Personal details" icon="ti-user">
          <h3>First Tab</h3>
          <p>Some content for the first tab</p>
          <label>
            Required Field
            <span
              style={{ color: "red", fontSize: "20px", fontWeight: "bold" }}
            >
              *
            </span>
          </label>
          <br />
          <input
            className="form-control"
            type="text"
            value={firstTabInput}
            onChange={(e) => setFirstTabInput(e.target.value)}
          />
        </FormWizard.TabContent>
        {/* Tabs should be validated */}
        <FormWizard.TabContent
          title="Additional Info"
          icon="ti-settings"
          isValid={checkValidateTab()}
          validationError={errorMessages}
        >
          <h3>Second Tab</h3>
          <p>Some content for the second tab</p>
        </FormWizard.TabContent>
        <FormWizard.TabContent title="Last step" icon="ti-check">
          <h3>Last Tab</h3>
          <p>Some content for the last tab</p>
        </FormWizard.TabContent>
      </FormWizard>
      {/* add style */}
      <style>{`
        @import url("https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css");
        .form-control {
            height: 36px;
            padding: 0.375rem 0.75rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            color: #495057;
            border: 1px solid #ced4da;
            border-radius: 0.25rem;
        }

      `}</style>
    </>
  );
}

First Tab

Code

On this page