Tutorial Kalkulator Umur - Menerapkan Validasi Formulir

Validasi formulir berfungsi sebagai mekanisme pengecekan untuk memastikan bahwa data yang dimasukkan oleh pengguna ke dalam kolom input sudah sesuai dengan format, tipe, dan batasan yang ditentukan sebelum data tersebut diproses lebih lanjut oleh sistem.

Dalam aplikasi kalkulator umur, validasinya cukup sederhana. Kita hanya akan membatasi proses penghitungan umur jika tanggalnya belum diinput. Karena kolom input tanggal sudah menggunakan type=date maka tidak akan ada data lain selain bentuk data tanggal yang bisa dimasukkan.

Kemungkinan kesalahan bentuk data input yang bisa terjadi adalah tidak-lengkap-nya format tanggal yang dimasukkan. Berikut adalah contohnya

Gambar: Validasi form input tanggal

Peringatan yang muncul adalah hasil validasi dari bawaan html itu sendiri.

Validasi Input Kosong

Berikut adalah cara menerapkan validasi untuk memastikan form input tanggal diisi oleh pengguna.

<script type="text/javascript">
        
    const root = document.querySelector("html");
    const currentDark = window.matchMedia("(prefers-color-scheme: dark)");
    const darkModeToggle = document.getElementById("darkmode-toggle");

    const inputDate = document.getElementById("date");
    const result = document.getElementById("result");
    const today = new Date();

    // deskripsikan dulu elemen form input tanggal
    // dan help text, untuk menampilkan teks peringatan
    const birthDate = document.getElementById("date");
    const helpText = document.getElementById("help-text");

    // . . .

    function calculateAge(){
        // periksa apakah tanggal lahir sudah diisi atau belum
        if(birthDate.value==""){
            birthDate.setAttribute("aria-invalid","true");
            helpText.innerHTML = "Masukkan tanggal lahir terlebih dahulu!";
            result.innerHTML = "";
        } else {
            // jika tanggal lahir diisi, baru lakukan proses penghitungan umur
            birthDate.setAttribute("aria-invalid","false");
            helpText.innerHTML = "";
            const age = today - new Date(inputDate.value);
            const xyears = age/1000/60/60/24/365.25;
            const xmonths = (xyears - Math.floor(xyears))*12;
            const xdays = (xmonths - Math.floor(xmonths))*30.5;

            result.innerHTML = "Umur kamu adalah <br>";
            result.innerHTML += Math.floor(xyears) + " tahun ";
            result.innerHTML += Math.floor(xmonths) + " bulan ";
            result.innerHTML += Math.floor(xdays) + " hari";
        }

        return false;
    }

</script>

Dengan script tersebut, kita mendahulukan pengecekan input tanggal apakah sudah diisi atau belum:

• Jika tidak ada, maka tampilkan peringatan di elemen id=help-text
• Jika ada, maka lakukan proses penghitungan umur

Aplikasi kalkulator bisa dilihat di sini.

Tahap 5: Rumus