JavaScript - Form Validation: A Beginner's Guide

Hai pengguna yang sedang belajar! Hari ini, kita akan mendalam ke dunia yang menarik dari validasi formulir JavaScript. Dalam tahun-tahun mengajar pemrograman, saya bisa katakan bahwa ini adalah salah satu keterampilan paling praktis dan penting yang Anda akan belajar. mari kita mulai!

Apa Itu Validasi Formulir?

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

Validasi Formulir Dasar

1. Memeriksa Apakah Field Kosong

Mari kita mulai dengan validasi yang paling dasar - memeriksa apakah 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 yang dinamai "fname" dari formulir yang dinamai "myForm".
• Jika nilai itu kosong (string kosong), kita menampilkan peringatan dan mengembalikan false, yang menghindari pengiriman formulir.

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 dengan ID "myNumber".
• Kita menggunakan isNaN() untuk memeriksa apakah itu bukan angka.
• Kita juga memeriksa apakah 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 apakah alamat email dalam format yang benar. Ini adalah cara kita 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:

• 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 masih lebih banyak karakter yang bukan spasi atau @

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:
• Sebuah bulan (01-12)
• Diikuti oleh /
• Sebuah hari (01-31)
• Lagi /
• Sebuah tahun 4-digit

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

Menggabungkan Semua

Sekarang kita telah melihat validasi individual, mari kita gabungkannya ke dalam satu formulir:

<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="Kirim">
</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 formulir dengan field untuk nama, umur, email, dan tanggal.
• Formulir onsubmit peristiwa memanggil validateForm().
• validateForm() memanggil semua fungsi validasi individual kita.
• Jika validasi mana pun gagal, pengiriman formulir dicegah.

Kesimpulan

Selamat! Anda telah belajar dasar validasi formulir JavaScript. Ingat, validasi tidak hanya tentang mencegah kesalahan - itu tentang menciptakan pengalaman pengguna yang baik. Dalam 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 yang diperlukan terisi	if (x == "")
Validasi Masukan Numerik	Memeriksa apakah 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	Memastikan tanggal dalam format MM/DD/YYYY	if (!regex.test(date))

Lanjutkan berlatih, dan segera Anda akan menjadi ahli validasi formulir! Ingat, setiap pemrogramer yang hebat dimulai tepat di tempat Anda sekarang. Selamat coding!

Credits: Image by storyset