Javascript Form Validasyon İşlemleri

Javascript'de form öğeleri validasyon işleminden geçirmek için birkaç yararlı bilgi paylaşmak istiyorum sizinle.

İlk olarak bildiğiniz gibi form öğelerine required min max minlength maxlength gibi nitelikler koyarak onların doğruluğunu kontrol edebiliyorduk. Örneğin;

<form action="" method="post">
    <input type="text" id="username" name="username" maxlength="20" required> <br>
    <input type="email" name="email" required> <br>
    <input type="password" required name="password" minlength="3" maxlength="20"> <br>
    <button type="submit">Gönder</button>
</form>

Eğer Gönder butonuna basarsanız tarayıcının çıkarttığı bazı değerleri görebilirsiniz.

Şimdi bu değerleri iptal etmek için form etiketine şu niteliği ekleyin.

<form novalidate="novalidate">

Artık o değerler gözükmeyecek ancak yinede formu geçerli olana kadar gönderme işlemini yapmayacak. Artık bu değerleri biz kendimiz alıp gösterebiliriz. Örneğin;

const formElem = document.querySelector('form')
formElem.addEventListener('submit', function(e) {
    e.preventDefault();

    [...this.elements].forEach(input => {
       if (!input.checkValidity()) {
           console.log(input.validationMessage); // hata mesajı
       } else {
           // form öğesi geçerli
       }
    })

    if (this.checkValidity() === true){
        // form içindeki tüm öğeler geçerli
    }

}, true);

Yani checkValidity() metodu ile form öğelerinin ve formun kendisinin kontrolünü yapabiliyoruz. Eğer true dönüyorsa geçerli false dönüyorsa geçersiz demektir.

Buna görede form öğeleri eğer geçersiz ise validationMessage propundan ilgili mesajı alabiliyoruz.

Bunu alabiliyorsak, artık istediğimiz şekilde değerlendiririz demek oluyor. Öncelikle bu form öğelerinin kontrol işlemlerini bir fonksiyona çevirelim. Ve bu fonksiyon içerisinde şunu yapalım, ilgili form öğesi eğer hatalıysa bunun hemen ardına small etiketi ile hata mesajını yazalım. Ancak bunu yazarken kontrol edelim, eğer zaten hata mesajı eklendiyse tekrar eklemeyelim. Ve son olarak, form öğesi geçerli olduğunda bu hatayı silmemiz gerekecek.

function formControl(input) {
    if (!input.checkValidity()) {
        let error
        if (input.nextElementSibling?.className === 'error-msg'){
            error = input.nextElementSibling
        } else {
            error = document.createElement('small')
        }
        error.className = 'error-msg'
        error.innerText = input.validationMessage
        input.insertAdjacentElement('afterend', error)
    } else {
        const errorMsg = input.nextElementSibling
        if (errorMsg) {
            errorMsg.remove()
        }
    }
}

Şimdi artık bir önceki form submit örneğimizi bununla bütünleştirebiliriz.

const formElem = document.querySelector('form')
formElem.addEventListener('submit', function(e) {
    e.preventDefault();

    // tüm form öğelerini kontrolden geçirelim
    [...this.elements].forEach(input => formControl(input))

    if (this.checkValidity() === true){
        // form içindeki tüm öğeler geçerli
    }

}, true);

Ayrıca anlık olarak form öğelerin kontrolünü yapmak için change keyup gibi eventlar tanımlamamız gerekiyor. Bunuda şöyle yapabiliriz

[...formElem.elements].forEach(input => {
    ['change', 'keyup'].forEach(method => input.addEventListener(method, e => formControl(e.target)))
})

Bu şekilde ilgili form içindeki tüm form öğelerine change ve keyup eventları tanımlamış olduk. formControl fonksiyonu her değişiklikte çalışacak ve varsa yeni hata mesajlarını ekrana basacak yoksa ilgili hata mesajı alanını sayfadan kaldıracak.

Form Değerlerini Almak ve Göndermek

Hatırlarsanız form içindeki tüm öğelerin geçerli olup olmadığını submit eventında form için checkValidity() metodunu kontrol ederek yapıyorduk. Şimdi ilgili kısmı şöyle düzenleyelim;

if (this.checkValidity() === true){
    new FormData(formElem);
}

Bu sayede artık formdata eventını dinleyebiliriz. FormData() objesi bu eventı tetikleyecek.

formElem.addEventListener('formdata', function(e) {

    // tüm form datamızı temsil ediyor
    let data = e.formData;

    // dilerseniz bunu bir ajax isteğiyle taçlandırabilirsiniz
    var request = new XMLHttpRequest();
    request.open("POST", "/ajax.php");
    request.addEventListener('load', function(response) {
        console.log(response)
    });
    request.send(data);
});