Bir form içerisindeki değerin boş olup olmadığını denetlemek gerekebilir. Bunu length metodu ile yapabiliriz. Fakat şöyle bir sorun var, eğer input değeri bir veya daha fazla boşluk içeriyorsa, length değeri ile tek başına sonuca gitmemiz mümkün olmayacaktır.

Öncelikle bir input etiketinin değerini aldığımızda ona string trim metodunu uygulamamız gerekir.

JavaScript String trim

trim metodu uygulandığı metinin başında ve sonunda olan boşlukları (whitespace) silmek için kullanılır. Kullanım şekli

const metin = " JavaScript";
const yeniMetin = metin.trim(); 
console.log(yeniMetin);
// Ekrana
// JavaScript
// yazdırır.

gibidir. Bu işlem sonucunda metin değişkeninin başında bulunan boşluk silinecektir. trim ile işlem yapıldığında orjinal değişkenin değeri değişmez, bunun yerine geriye yeni bir metin dönderilir.

JavaScript String length

Bir string değişkenin karakter sayısını bulmak için length metodu kullanılır. Kullanım şekli

const metin = "JavaScript";
const uzunluk = metin.leghth();

console.log(uzunluk);

// Ekrana
// 10
// yazdırılacaktır.

örnekte olduğu gibidir.

Şimdi React ile uygulama geliştirirken bir input değerinin boş olup olmadığını nasıl denetleyeceğimizi görelim. Bunun için metin girişi için bir adet input etiketi kullanacağız.

React JSde Girilen Metinin Boş Olup Olmadığını Bulma

Bu örneğimizde bir input tagı kullanacağız. Sonrasında onChange eventini ayarlayarak değişen metini yakalayacağız ve sonrasında onClick eventi ile bir denetim başlatacağız.

import React, { useState } from 'react';

function App() {
    const [inputText, setInputText] = useState('');

    const handleChange = (e) => {
        e.preventDefault();
        setInputText(e.value);
    }

    const handleClick = (e) => {
        e.preventDefault();
        const text = inputText.trim();

        if(text.length !== 0) {
            console.log("Geçerli bir metin girildi.");
        } else {
            console.log("Bir değer girilmedi.")
        }
    }

    return (
        <div>
            <h2>Metin : { inputText} </h2>
            <hr />

            <input 
                name='message'
                id='message'
                onChange={handleChange} 
                />
            
            <br />
            <br />

            <button onClick={hadleClick}>
                Denetle
            </button>
        </div>
    );
}

export default App;

useState kullanarak state üzerinde bir değişken ve onu ayarlayacak bir fonksiyon oluşturuyoruz. Input alanında oluşan her değişim sonrasında handleChange fonksiyonu çağrılacak ve input değeri inputText değişkenine atanacak.

Eğer Denetle düğmesine tıklanırsa, bu durumda handleClick metodu çağrılacak ve sonrasında önce inputText değerine bir trim uygulanarak gereksiz boşluklar siliniyor. Sonrasında trim sonucunda oluşturduğumuz text değişkeninin karakter sayısını length ile denetlemek.

Eğer bir giriş yapılmış ise text değişkeninin uzunluğu 0 dan büyük olacaktır ve konsola Geçerli bir metin girildi yazdırılacaktır.

Aksi durumda konsola Bir değer girilmedi mesajı yazdırılacaktır.

Sonuç

Eğer dışarıdan gelen bir string değerinin boş olup olmadığını denetlemek istiyorsak, öncelikle boşlukların silinmesi gerekir, bunun için trim metodunu kullanıyoruz. Sonrasında string değişkenin length metodu ile uzunluğunu denetliyoruz. Eğer uzunluk 0 dan büyükse bir içerik olduğuna karar veriyoruz.

Sorunuz mu var? Lütfen yorumlarda bizim ile paylaşın.