HTML5ANDCSS3Tools and Tutorials

HTML5ANDCSS3Tools and Tutorials

Form Submission and Validation — React Tutorial - HTML5ANDCSS3

Forms and Inputs

Form Submission and Validation

Written by Swapnil RajaPublished 29 Aug 2026

Put onSubmit on the form, not onClick on the button. That one choice gets you Enter-to-submit and browser validation for free.

Submitting

A form submits when the button is clicked or Enter is pressed in a field. Handling it on the form catches both; handling the button's click catches only one, and keyboard users notice.

onSubmit and preventDefault

jsx

function Signup() {
  const [email, setEmail] = React.useState("")
  const [sent, setSent] = React.useState(null)

  function handleSubmit(event) {
    event.preventDefault()      // stop the browser reloading the page
    setSent(email)
    setEmail("")
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@example.com"
      />{" "}
      <button type="submit">Sign up</button>
      {sent && <p style={{ color: "#15803d" }}>Submitted: {sent}</p>}
      <p style={{ color: "#64748b" }}>Press Enter in the field — it submits too.</p>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Signup />)

PreviousControlled Inputs NextuseEffect Explained

Errors after the user has tried

jsx

function validate({ email, password }) {
  const errors = {}
  if (!email.includes("@")) errors.email = "Needs an @"
  if (password.length < 8) errors.password = "At least 8 characters"
  return errors
}

function Form() {
  const [values, setValues] = React.useState({ email: "", password: "" })
  const [touched, setTouched] = React.useState({})
  const errors = validate(values)

  const update = (field, value) => setValues((v) => ({ ...v, [field]: value }))
  const touch = (field) => setTouched((t) => ({ ...t, [field]: true }))

  return (
    <form onSubmit={(e) => e.preventDefault()} style={{ display: "grid", gap: 8, maxWidth: 320 }}>
      <div>
        <input
          value={values.email}
          onChange={(e) => update("email", e.target.value)}
          onBlur={() => touch("email")}
          placeholder="Email"
        />
        {touched.email && errors.email && (
          <small style={{ color: "#b91c1c" }}> {errors.email}</small>
        )}
      </div>

      <div>
        <input
          type="password"
          value={values.password}
          onChange={(e) => update("password", e.target.value)}
          onBlur={() => touch("password")}
          placeholder="Password"
        />
        {touched.password && errors.password && (
          <small style={{ color: "#b91c1c" }}> {errors.password}</small>
        )}
      </div>

      <button type="submit" disabled={Object.keys(errors).length > 0}>
        Submit
      </button>
    </form>
  )
}

const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<Form />)