Next.js Forms — Controlled Inputs, Validation & Submission

▲ Next.js 15+ (App Router) 🟢 Chapter 20 of 43 📂 Phase 9: Forms & Server Actions 📅 2026 Edition

📌 Covered in this chapter: Controlled Inputs · Form Submission · Client-Side Validation · Error & Success Messages · Resetting Forms

Forms, prathi web app lో core part — login, signup, contact, checkout anni forms mediante జరుగుతాయి. Ee chapter lో React-style controlled forms build cheయడం nerchukుందాం (Server Actions తో forms next chapter lో).

1Controlled Inputs with useState

"Controlled input" అంటే, input value ni React state ద్వారా control చేయడం — ప్రతి keystroke కి state update అవుతుంది:

💻 Example 1: A Simple Contact Form

app/contact/ContactForm.tsx ▶ Run in Compiler

"use client";

import { useState } from "react";

export default function ContactForm() {
  const [email, setEmail] = useState("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    console.log("Submitted:", email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="you@example.com"
      />
      <button type="submit">Send</button>
    </form>
  );
}

🔍 Breakdown:

e.preventDefault(): Default browser form submission (page reload) ni ఆపేస్తుంది.
value={"{"}email{"}"} + onChange: Input value ni React state తో sync చేస్తుంది — "controlled" component makes it.

2Client-Side Validation & Error Messages

💻 Example 2: Validating Before Submit

app/contact/ContactForm.tsx ▶ Run in Compiler

"use client";

import { useState } from "react";

export default function ContactForm() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!email.includes("@")) {
      setError("Please enter a valid email address.");
      return;
    }
    setError("");
    console.log("Submitted:", email);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} />
      {error && <p style={{ color: "red" }}>{error}</p>}
      <button type="submit">Send</button>
    </form>
  );
}

3Success State & Resetting the Form

Submission successful అయిన తర్వాత, user కి confirmation చూపించి, form ni reset చేయడం good UX:

💻 Example 3: Success Message + Reset

app/contact/ContactForm.tsx ▶ Run in Compiler

function handleSubmit(e: React.FormEvent) {
  e.preventDefault();
  // ... submit logic here
  setSubmitted(true);
  setEmail(""); // Reset the input
}

⚠️ Common Mistake: Not Preventing Default Form Behavior

onSubmit handler లో e.preventDefault() మర్చిపోతే, browser default గా page ని full reload చేస్తుంది — React state, SPA-style navigation anni పోతాయి. Every custom form submit handler లో e.preventDefault() తప్పనిసరి.

💻 Hands-on Interactive Practice Challenge

Build a Newsletter signup form with a single email input, validating that it's not empty before showing a 'Subscribed!' message.

app/_components/Newsletter.tsx ▶ Run in Compiler

"use client";

import { useState } from "react";

export default function Newsletter() {
  const [email, setEmail] = useState("");
  const [subscribed, setSubscribed] = useState(false);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (email.trim() === "") return;
    setSubscribed(true);
  }

  if (subscribed) return <p>Subscribed! 🎉</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
      <button type="submit">Subscribe</button>
    </form>
  );
}

Run This Challenge in Online Node.js IDE →

❓ Frequently Asked Questions (FAQ)

Q Controlled, uncontrolled forms madhya తేడా ఏంటి?

Controlled forms లో input value React state ద్వారా manage అవుతుంది (prathi keystroke ki re-render). Uncontrolled forms లో, DOM tానే value hold చేస్తుంది, useRef ద్వారా submit time లో matrame చదువుతారు.

Q Client-side validation చాలదా, backend validation కూడా అవసరమా?

Backend validation ఎప్పుడూ compulsory — client-side validation ni browser dev tools ద్వారా bypass చేయవచ్చు. Client validation UX కోసం matrame, security కోసం కాదు.

Q Next.js లో forms build చేయడానికి Server Actions better ah, ఈ controlled approach better ah?

Simple forms (search, filters) కి controlled state సరిపోతుంది. Database ki data save చేసే forms (signup, checkout) కి Server Actions (next chapter) better — progressive enhancement, less client JS.

Written by Our Compiler Technical Editorial Team
Reviewed for accuracy & tested on Next.js 15+ (App Router) · Last updated August 2026