Validasi Form sebagai Bahasa Komunikasi

Di dunia pengembangan antarmuka (UI/UX), form bukan hanya sekumpulan input dan button. Ia adalah jembatan antara pengguna dan sistem. Saat pengguna mengisi form, mereka sedang berbicara kepada sistem. Dari sistem — validasi — dan saling merespon.

Itulah mengapa validasi bukan sekadar fungsi teknis, melainkan juga bentuk bahasa komunikasi. Validasi memberi tahu pengguna apa yang benar, apa yang salah, dan bagaimana memperbaikinya. Validasi yang baik membuat aplikasi terasa ramah, jelas, dan profesional. Sebaliknya, validasi yang buruk — atau bahkan tidak ada — bisa membuat pengguna bingung, frustrasi, dan pada akhirnya menyerah.

Dari Fungsi Teknis ke Bahasa Komunikasi

Kita sering melihat validasi hanya sebagai cara untuk memastikan data tidak salah input. Tapi mari kita lihat validasi sebagai sesuatu yang lebih, yakni sebagai cara sistem bicara kepada pengguna.

Sistem yang baik tidak sekadar menolak input yang salah, tapi juga membantu pengguna memperbaikinya dengan cara yang wajar dan sopan. Sebuah form bisa memberi arahan, teguran ringan, bahkan edukasi. Dan semua itu terjadi lewat validasi.

Contoh Sederhana

Untuk menggambarkan bagaimana validasi bisa menjadi komunikasi yang baik, mari kita ambil contoh kecil: input tahun. Terlihat sederhana, tapi punya banyak pelajaran di sana.

Hanya Terima Angka

Kita bisa saja menggunakan tag input type number dengan membatasinya menggunakan min dan max seperti:
<input type="number" min="1900" max="2099" />
Atau dengan penggunaan tipe text yang lebih kaya fitur dengan pattern dan maxlength seperti:

<input type="text" placeholder="Tahun" maxlength="4"
        inputmode="numeric" pattern="[0-9]*"
        oninput="this.value = this.value.replace(/\D/g, '')">

Di sini, sistem hanya menyaring agar input berupa angka. Fungsinya sederhana, tapi sudah menunjukkan pesan awal: "Hanya angka yang diterima." Tambahan inputmode="numeric" juga membantu pengguna di perangkat mobile agar muncul keyboard angka — bentuk komunikasi tak langsung yang sangat membantu.

Penggunaan Validasi Rentang dengan Alert

<input type="text" placeholder="Tahun" maxlength="4"  
       oninput="this.value = this.value.replace(/\D/g, '')"  
       onblur="const y = parseInt(this.value); if (y && (y < 1900 || y > 2099)) alert('Tahun harus antara 1900 dan 2099');">

Di sini, kita mulai memperhalus komunikasi:
"Maaf, tahun yang kamu masukkan tidak masuk akal."
Dengan alert ini, sistem berbicara lebih jelas. Pengguna diberi tahu bukan hanya bahwa input salah, tapi mengapa salah, dan batasannya apa.

Validasi Lebih Kuat dan Nyaman

<input type="text" placeholder="Tahun" maxlength="4" inputmode="numeric" 
       oninput="this.value = this.value.replace(/\D/g, '')"
       onblur="(function() {
            const y = parseInt(this.value);
            if (!this.value) return;
            if (isNaN(y) || y < 1900 || y > 2099) {
                alert('Tahun harus antara 1900 dan 2099');
                setTimeout(() => this.focus(), 0); //
            }
        }).call(this)">

Validasi ini lebih cermat dan menjaga kenyamanan pengguna:

• Tidak menampilkan pesan jika input kosong.
• Memastikan nilai memang angka sebelum diperiksa.
• Memberi tahu pengguna, lalu langsung mengembalikan fokus ke kolom untuk koreksi.

Sebagai bentuk lebih dari kenyamanan pengguna, selain fungsi focus, kamu juga bisa memasukkan fungsi select, agar teks inputan yang salah bisa langsung terselect. Jadinya, koreksi bisa langsung dilakukan.

<input type="text" placeholder="Tahun" maxlength="4" inputmode="numeric"
        oninput="this.value = this.value.replace(/\D/g, '')"
        onblur="(function() {
            const y = parseInt(this.value);
            if (!this.value) return;
            if (isNaN(y) || y < 1900 || y > 2099) {
                alert('Tahun harus antara 1900 dan 2099');
                setTimeout(() => {
                    this.focus();
                    this.select();
                }, 0);
            }
        }).call(this)">

Dengan begitu, sistem tidak hanya ‘menghakimi’, tapi juga mengajak berdiskusi sekaligus memberi solusi.

Apa yang Bisa Kita Pelajari?

Contoh di atas terlihat sederhana. Tapi ini menggambarkan bahwa:

• Form bisa menjadi alat komunikasi yang baik.
• Validasi harus menyampaikan pesan yang jelas dan manusiawi.
• Komunikasi yang baik membuat pengguna merasa dibantu, bukan disalahkan.

Validasi bukan hanya "tolak jika salah", tapi juga:

"Hey Guys, Mari kita bantu pengguna sampai mereka mengisi dengan benar."

Validasi & Keamanan: Dua Hal yang Tidak Terpisah

Selain komunikasi, validasi juga penting untuk keamanan:

• Jangan hanya andalkan validasi di browser.
• Lakukan validasi ulang di server.
• Lindungi input dari injeksi, XSS, dan input berbahaya lainnya.

Dengan begitu, validasi tidak hanya menjadi bahasa komunikasi, tapi juga lapisan pelindung untuk sistem.

Jadi, Validasi bukan sekadar fitur tambahan. Ia adalah cara aplikasi kamu berbicara dengan penggunanya. Lewat validasi, kamu bisa menunjukkan profesionalisme, empati, dan perhatian terhadap pengalaman pengguna.

Dan meskipun hanya dari input kecil seperti “tahun”, kamu sudah bisa mulai membangun komunikasi yang baik antara manusia dan sistem.

Karena pada akhirnya, sistem yang paling disukai adalah sistem yang mengerti pengguna — dan mau diajak bicara.