0Pricing
Next.js 15 Fullstack Web Apps · Ders

React Hook Form ile Form Doğrulama

Popüler React Hook Form kitaplığını kullanarak etkili form doğrulaması uygulayın.

React Hook Form ile Form Doğrulama, CoddyKit'te ücretsiz bir Next.js 15 Fullstack Web Apps dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack Web Apps öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Why React Hook Form?

Managing forms in React can get complex, especially with validation. React Hook Form (RHF) is a popular library designed to simplify this process.

  • Performance: Minimizes unnecessary re-renders.
  • Developer Experience: Simple API, easy to integrate.
  • Validation: Powerful and flexible rules.

It helps you build robust forms with less code and better performance.

Getting Started: useForm

First, install React Hook Form using npm or yarn. Then, import and use the useForm hook in your component. This hook initializes your form and provides essential methods.

import React from 'react';
import { useForm } from 'react-hook-form';

function SimpleForm() {
  // useForm initializes the form and gives us tools
  const { register, handleSubmit } = useForm();

  // This function runs when the form is submitted
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Inputs will go here */}
      <button type="submit">Submit</button>
    </form>
  );
}

Registering Input Fields

To make an input field part of your RHF form, you need to "register" it. The register function takes the input's name and returns props that you spread onto the input element.

import React from 'react';
import { useForm } from 'react-hook-form';

function RegisterInputForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name")} />
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email" {...register("email")} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Basic Validation: Required

RHF lets you easily add validation rules during registration. The required: true option makes an input field mandatory. If left empty, the form won't submit.

import React from 'react';
import { useForm } from 'react-hook-form';

function RequiredValidationForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="itemName">Item Name:</label>
      <input id="itemName" {...register("itemName", { required: true })} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Displaying Error Messages

When validation fails, RHF populates the formState.errors object. You can use this object to display helpful error messages next to your input fields, guiding the user.

import React from 'react';
import { useForm } from 'react-hook-form';

function DisplayErrorsForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name", { required: "Name is required!" })} />
      {errors.name && <p style={{color: 'red'}}>{errors.name.message}</p>}
      <br/>
      <label htmlFor="age">Age:</label>
      <input id="age" type="number" {...register("age", { min: 18 })} />
      {errors.age && <p style={{color: 'red'}}>Must be at least 18.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Length & Pattern Rules

RHF also offers minLength and maxLength for character limits. The pattern option allows you to validate input against a regular expression, perfect for specific formats like email or phone numbers.

import React from 'react';
import { useForm } from 'react-hook-form';

function LengthPatternForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">Username:</label>
      <input id="username" {...register("username", { minLength: 3, maxLength: 10 })} />
      {errors.username && <p style={{color: 'red'}}>3-10 chars.</p>}
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email"
        {...register("email", {
          pattern: /^\S+@\S+$/i
        })}
      />
      {errors.email && <p style={{color: 'red'}}>Invalid email.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Custom Validation Logic

When built-in rules aren't enough, you can create custom validation logic using the validate option in register. This function should return true for valid input or a string error message otherwise.

import React from 'react';
import { useForm } from 'react-hook-form';

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="password">Password:</label>
      <input id="password" type="password"
        {...register("password", {
          validate: (value) =>
            value.length >= 8 || "Min 8 chars!"
        })}
      />
      {errors.password && <p style={{color: 'red'}}>{errors.password.message}</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Handling Form Submission

The handleSubmit function from useForm wraps your own submission logic. It ensures your onSubmit function is only called if all form validations pass. It automatically passes the validated form data to your function.

import React from 'react';
import { useForm } from 'react-hook-form';

function SubmitHandlerForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  // This function is called only if validation passes
  const onSubmit = (data) => {
    console.log("Form data:", data);
    alert("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="task">Task Description:</label>
      <input id="task" {...register("task", { required: true })} />
      {errors.task && <p style={{color: 'red'}}>Task is required.</p>}
      <br/>
      <button type="submit">Add Task</button>
    </form>
  );
}

Resetting Form Fields

After a successful submission, or if you want to clear the form at any point, the reset method from useForm is very useful. It can clear all fields or set them to specific default values.

import React from 'react';
import { useForm } from 'react-hook-form';

function ResetForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    alert("Data sent!");
    reset(); // Clears all form fields
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="feedback">Your Feedback:</label>
      <input id="feedback" {...register("feedback")} />
      <br/>
      <button type="submit">Send Feedback</button>
      <button type="button" onClick={() => reset()}>Clear Form</button>
    </form>
  );
}

Test Your RHF Knowledge

Which of the following are valid ways to define validation rules when registering an input with React Hook Form?

Recap: RHF for Validation

You've learned how React Hook Form simplifies form validation in Next.js applications!

  • It provides the useForm hook to manage your form.
  • Inputs are connected using the register method.
  • Validation rules (like required, minLength, pattern, validate) are passed directly to register.
  • Errors are accessed via formState.errors.
  • The handleSubmit function ensures your data is valid before submission.
  • The reset method helps clear forms easily.

Next, explore how to combine these with Server Actions for fullstack form management!

Sıkça Sorulan Sorular

“React Hook Form ile Form Doğrulama” dersi ücretsiz mi?

Evet — “React Hook Form ile Form Doğrulama” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack Web Apps kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack Web Apps kursu toplamda 4 dersten oluşur.

“React Hook Form ile Form Doğrulama” dersinde ne öğreneceğim?

Popüler React Hook Form kitaplığını kullanarak etkili form doğrulaması uygulayın. Next.js 15 Fullstack Web Apps ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Next.js 15 Fullstack Web Apps öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack Web Apps, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“React Hook Form ile Form Doğrulama” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Next.js 15 Fullstack Web Apps dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Next.js 15 Fullstack Web Apps dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Denetimli Bileşenler ve Durum
  2. React Hook Form ile Form Doğrulama
  3. Sunucu Eylemleriyle Tam Yığın Formlar
  4. Dosya Yüklemeleri ve Çok Parçalı Form İşleme
← Next.js 15 Fullstack Web Apps Sayfasına Dön