JavaScript - Form Validation: A Beginner's Guide

Halo teman-teman pemula pemrograman! Hari ini, kita akan mendalam ke dunia yang menarik dari validasi form JavaScript. Sebagai orang yang telah mengajar pemrograman selama tahun tahun, saya bisa katakan bahwa ini adalah salah satu keterampilan yang paling praktis dan penting yang Anda akan belajar. mari kita mulai!

Apa Itu Validasi Form?

Sebelum kita masuk ke kode, mari kita pahami apa itu validasi form dan mengapa itu penting. Bayangkan Anda mengisi formulir untuk memesan pizza secara online. Anda tentu tidak ingin secara tidak sengaja memesan 1000 piza instead of 1, kan? Itu adalah tempat validasi form berada - itu memeriksa data yang dimasukkan oleh pengguna untuk memastikan itu benar dan dalam format yang benar.

Validasi Form Dasar

1. Memeriksa Jika Field Kosong

Mari kita mulai dengan validasi yang paling dasar - memeriksa jika field kosong. Ini adalah contoh sederhana:

function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Nama harus diisi");
return false;
}
}

Dalam kode ini:

• Kita mendapatkan nilai field dengan nama "fname" dari form dengan nama "myForm".
• Jika nilai itu kosong (string kosong), kita menampilkan peringatan dan mengembalikan false, yang menghindari pengiriman form.

2. Validasi Masukan Numerik

Sekarang, mari kita pastikan field hanya mengandung angka:

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Input tidak valid");
return false;
}
}

Ini apa yang terjadi:

• Kita mendapatkan nilai field input dengan ID "myNumber".
• Kita menggunakan isNaN() untuk memeriksa jika itu bukan angka.
• Kita juga memeriksa jika angka itu antara 1 dan 100.
• Jika salah satu dari kondisi ini benar, kita menampilkan peringatan dan mengembalikan false.

Validasi Format Data

1. Validasi Email

Salah satu validasi yang paling umum adalah memeriksa jika alamat email dalam format yang benar. Ini adalah cara kita dapat melakukannya:

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Silakan masukkan alamat email yang valid");
return false;
}
}

Ini mungkin terlihat sedikit menakutkan, tapi mari kitauraikan ini:

• Kita menggunakan ekspresi reguler (regex) untuk memeriksa format email.
• Regex memeriksa:
• Beberapa karakter yang bukan spasi atau @ ([^\s@]+)
• Diikuti oleh simbol @
• Diikuti oleh lebih banyak karakter yang bukan spasi atau @
• Diikuti oleh titik
• Diikuti oleh karakter yang bukan spasi atau @ lagi

2. Validasi Tanggal

Mari kita validasi tanggal untuk memastikan itu dalam format MM/DD/YYYY:

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Silakan masukkan tanggal yang valid dalam format MM/DD/YYYY");
return false;
}
}

Regex ini bahkan lebih kompleks, tapi ini apa yang dilakukannya:

• Itu memeriksa:
• Bulan (01-12)
• Diikuti oleh /
• Tanggal (01-31)
• Lagi /
• Tahun 4 digit

Ingat, meskipun ini memeriksa format, itu tidak memeriksa jika tanggal itu benar-benar valid (seperti 30 Februari).

Menggabungkan Semua

Sekarang kita telah melihat validasi individual, mari kita gabungkannya ke dalam form tunggal:

<form name="myForm" onsubmit="return validateForm()">
Nama: <input type="text" name="fname"><br>
Umur: <input type="text" id="myNumber"><br>
Email: <input type="text" id="myEmail"><br>
Tanggal: <input type="text" id="myDate"><br>
<input type="submit" value="Submit">
</form>

<script>
function validateForm() {
if (!validateName() || !validateNumber() || !validateEmail() || !validateDate()) {
return false;
}
return true;
}

function validateName() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Nama harus diisi");
return false;
}
return true;
}

function validateNumber() {
let x = document.getElementById("myNumber").value;
if (isNaN(x) || x < 1 || x > 100) {
alert("Umur harus angka antara 1 dan 100");
return false;
}
return true;
}

function validateEmail() {
let email = document.getElementById("myEmail").value;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!regex.test(email)) {
alert("Silakan masukkan alamat email yang valid");
return false;
}
return true;
}

function validateDate() {
let date = document.getElementById("myDate").value;
let regex = /^(0[1-9]|1[0-2])\/(0[1-9]|[12][0-9]|3[01])\/\d{4}$/;
if (!regex.test(date)) {
alert("Silakan masukkan tanggal yang valid dalam format MM/DD/YYYY");
return false;
}
return true;
}
</script>

Dalam contoh lengkap ini:

• Kita memiliki form dengan field untuk nama, umur, email, dan tanggal.
• Form onsubmit event memanggil validateForm().
• validateForm() memanggil semua fungsi validasi individual kita.
• Jika validasi mana pun gagal, pengiriman form dicegah.

Kesimpulan

Selamat! Anda telah belajar dasar validasi form JavaScript. Ingat, validasi tidak hanya tentang mencegah kesalahan - itu tentang menciptakan pengalaman pengguna yang baik. Ketika Anda terus melanjutkan perjalanan pemrograman Anda, Anda akan menemukan banyak cara untuk meningkatkan formulir Anda dan membuatnya lebih ramah pengguna.

Berikut adalah tabel yang menggabungkan metode validasi yang kita pelajari:

Metode	Tujuan	Contoh
Pemeriksaan Field Kosong	Memastikan field wajib diisi	if (x == "")
Validasi Masukan Numerik	Memeriksa jika input adalah angka dan dalam rentang	if (isNaN(x) || x < 1 || x > 100)
Validasi Email	Memastikan format email	if (!regex.test(email))
Validasi Format Tanggal	Memeriksa jika tanggal dalam format MM/DD/YYYY	if (!regex.test(date))

Terus berlatih, dan segera Anda akan menjadi ahli validasi form! Ingat, setiap programmer yang hebat dimulai dari tempat Anda sekarang. Selamat coding!

Credits: Image by storyset