Form Validation

import { Timepicker } from "timepicker-ui-react";
import { useState } from "react";

function App() {
  const [time, setTime] = useState("");
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    
    if (!time) {
      setError("Time is required");
      return;
    }

    setError("");
    alert(`Form submitted: ${time}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <Timepicker
        value={time}
        className={error ? "border-red-500" : ""}
        onUpdate={(data) => {
          setTime(`${data.hour}:${data.minutes} ${data.type}`);
          setError("");
        }}
      />
      {error && <p className="text-red-500">{error}</p>}
      <button type="submit">Submit</button>
    </form>
  );
}