React ile Form Validasyonu Nasıl Yapılır?

Adı : React ile Form Validasyonu Nasıl Yapılır?

React ile form validasyonu, kullanıcının girdiği verilerin belirli kurallara uygun olup olmadığını kontrol etme işlemidir. Bu sayede hatalı veya eksik verilerin kullanıcıya bildirilerek düzeltilmesi sağlanır. Form validasyonu, kullanıcının doğru veri girişi yapmasını ve yanlışlıkla hatalı bilgi girişi yapmasını önlemek için önemli bir adımdır.

React, form validasyonunu kolaylaştırmak için çeşitli yapılar ve kütüphaneler sunar. Bu yazıda, React ile form validasyonu nasıl yapıldığını ve çeşitli örnekleri göstereceğiz.

1. Form Validasyonuna Başlarken
Form validasyonuna başlamadan önce, `useState` kancasını kullanarak formda kullanılacak değişkenleri tanımlamamız gerekiyor.

```jsx
import { useState } from 'react';

const App = () => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

// ...
}
```

Yukarıdaki örnekte, `name`, `email` ve `password` adında üç farklı değişken tanımlanmıştır. Bu değişkenler, kullanıcının formdaki girdilerini tutacak ve validasyon işlemleri için kullanılacaktır.

2. Girdi Alanlarına Validasyon Eklemek
Girdi alanlarında validasyon eklemek için `onChange` olayını kullanabiliriz. Bu olay her girdi alanında bir değişiklik olduğunda tetiklenecektir. Aşağıdaki örnekte, `name` girdi alanında bir validasyon uygulayalım:

```jsx
const handleNameChange = (event) => {
const value = event.target.value;

// Name validasyonunu yap
if (value.length < 3) {
// Validasyon hatası var
} else {
// Validasyon hatası yok
}

setName(value);
}

// ...


```

Yukarıdaki örnekte, `onChange` olayı tetiklendiğinde `handleNameChange` fonksiyonu çağrılır. Bu fonksiyon, girdi alanındaki değişikliği alır ve validasyon işlemini gerçekleştirir. `name` değişkenine atanmadan önce validasyon kontrolü yapılır.

3. Hata Mesajlarını Göstermek
Validasyon hatası olduğunda, kullanıcıya hatayı bildiren bir mesaj göstermek önemlidir. Bunun için ayrı bir `error` değişkeni kullanabiliriz:

```jsx
const [name, setName] = useState('');
const [nameError, setNameError] = useState('');

// ...

const handleNameChange = (event) => {
const value = event.target.value;

if (value.length < 3) {
setNameError('İsim minimum 3 karakter olmalı!');
} else {
setNameError('');
}

setName(value);
}

// ...

{ nameError &&

{nameError}

}
```

Yukarıdaki örnekte, `setNameError` fonksiyonu, `nameError` değişkenini güncelleyerek hata mesajını ayarlar. Ardından, hata mesajı ekranda `p` etiketi ile gösterilir.

4. Formun Gönderilmesi ve Tüm Validasyonların Kontrol Edilmesi
Form gönderildiğinde tüm validasyonların kontrol edilmesi gerekir. Bunun için `onSubmit` olayını kullanabiliriz. Aşağıdaki örnek, `handleSubmit` fonksiyonunu kullanarak formun gönderilmesini ve tüm validasyonların kontrol edilmesini göstermektedir:

```jsx
const handleSubmit = (event) => {
event.preventDefault();

if (name.length < 3) {
setNameError('İsim minimum 3 karakter olmalı!');
} else {
setNameError('');
}

// Diğer alanların validasyon kontrolü

// Form gönderme işlemi
}

// ...

{/* Girdi alanları ve hata mesajları */}
Gönder

```

Yukarıdaki örnekte, `handleSubmit` fonksiyonu formun gönderilmesini kontrol eder. `preventDefault` fonksiyonu, varsayılan form gönderme işlemini engeller. Ardından, tüm girdi alanları için validasyon kontrolleri yapılır.

Sık Sorulan Sorular
Q: React ile form validasyonu neden önemlidir?
A: Form validasyonu, kullanıcının doğru veri girişi yapmasını ve yanlışlıkla hatalı bilgi girişi yapmasını önlemek için önemlidir. Bu sayede yanlış veri kaydetme veya hatalı işlemler önlenebilir.

Q: Birden fazla validasyon kuralı nasıl uygulanır?
A: Birden fazla validasyon kuralı uygulamak için ilgili girdi alanındaki `onChange` olayında her kuralın ayrı ayrı kontrol edilmesi gerekmektedir. Her bir kural kontrolü için ayrı bir `if` koşulu kullanabilirsiniz.

Q: Validasyon hatalarını nasıl gösterebilirim?
A: Validasyon hatalarını göstermek için bir hata mesajı değişkeni kullanabilirsiniz. Bu hata mesajı, validasyon hatası olduğunda güncellenir ve ekranda gösterilir. Hata mesajını şartlı `p` etiketi ile göstermek en yaygın yöntemdir.

Bu yazıda, React ile form validasyonu nasıl yapılacağını ve örneklerini inceledik. Form validasyonu, kullanıcının doğru ve hata içermeyen veriler girmesini sağlayarak uygulamanızın güvenliğini ve doğruluğunu artırır. React'in form validasyon özelliklerini kullanarak, geliştirme sürecini kolaylaştırabilir ve hata oranını azaltabilirsiniz."