Home / JavaScript / Form Validation dengan JavaScript (Validasi Input Form)

Form Validation dengan JavaScript (Validasi Input Form)

Created at by Aris Munandar
Share on

Validasi form adalah salah satu fondasi penting dalam pengembangan web modern. Hampir semua situs yang melibatkan interaksi pengguna—mulai dari pendaftaran akun, login, komentar, hingga transaksi—menggunakan form sebagai pintu masuk data. Karena itu, memastikan bahwa data yang masuk benar, aman, dan sesuai aturan menjadi tugas utama form validation, terutama dengan JavaScript.

Daftar isi

Baca juga: Tutorial Event JavaScript: onclick, onsubmit, addEventListener

Apa Itu Form Validation?

Form validation adalah proses untuk memeriksa apakah data yang dimasukkan ke dalam form sudah sesuai dengan aturan yang ditentukan, misalnya:

  • Email harus berformat benar
  • Password harus memiliki minimal 8 karakter
  • Input tidak boleh kosong
  • Hanya angka yang boleh dimasukkan
  • Teks tidak boleh mengandung karakter berbahaya

Validasi dapat dilakukan sebelum form dikirim (client-side) maupun setelah sampai di server (server-side).

Dalam konteks JavaScript, validasi dilakukan di sisi browser, sehingga pengguna mendapatkan feedback secara langsung tanpa perlu reload halaman.

1. Kenapa Validasi Sangat Penting?

Validasi form bukan hanya soal estetika atau kenyamanan pengguna—validasi memiliki fungsi besar untuk keamanan data dan kualitas input.

Beberapa alasan kenapa validasi wajib dilakukan:

Mencegah Data yang Salah atau Tidak Lengkap

Tanpa validasi, pengguna bisa mengirim:

  • Email yang tidak valid
  • Nomor telepon kosong
  • Password terlalu pendek
  • Karakter-karakter aneh yang mengacaukan sistem

Meningkatkan User Experience (UX)

Dengan validasi real-time, pengguna tahu kesalahan mereka sejak mengetik, tanpa harus submit dulu.

Melindungi Keamanan Aplikasi

Validasi membantu mencegah:

  • Script injection (XSS)
  • Input berbahaya
  • Spam
  • Submit otomatis

Menghemat Beban Server

Karena kesalahan ditangkap di sisi browser, server tidak perlu mengolah request yang tidak valid.

2. Peran JavaScript dalam Validasi Modern

JavaScript adalah bahasa utama di browser, sehingga menjadi alat paling fleksibel untuk validasi form.

Dengan JavaScript, pengembang dapat membuat validasi yang:

Dinamis

Memberikan feedback langsung tanpa reload halaman.

Kustomisasi Pesan Error

Setiap input dapat memiliki pesan error yang berbeda sesuai kebutuhan aplikasi.

Kondisi Validasi yang Kompleks

Misalnya:

  • Validasi password yang mencakup angka, huruf besar, simbol
  • Validasi tanggal lahir minimal 18 tahun
  • Validasi username unik (menggunakan API)

Real-Time Validation

Menggunakan event seperti input, keyup, atau change.

JavaScript memberi fleksibilitas di mana HTML5 validation tidak mampu memenuhi kebutuhan aplikasi skala besar.

3. Bedanya Validasi Front-End (JavaScript) vs Back-End

Validasi harus dilakukan dua lapis, yaitu di browser dan di server. Keduanya punya peran berbeda.

Jenis ValidasiDilakukan DiFungsi UtamaKeunggulan
Front-End (JavaScript)BrowserMemeriksa input sebelum dikirimCepat, interaktif, real-time
Back-End (PHP, Node.js, Python, dll.)ServerMemastikan keamanan dan konsistensi dataTidak bisa dilewati pengguna

Front-End Validation (JavaScript)

Digunakan untuk:

  • Mengecek input kosong
  • Format email salah
  • Password terlalu pendek
  • Nomor bukan angka

Namun tidak cukup untuk keamanan.

Back-End Validation

Perlu untuk:

  • Mencegah manipulasi form
  • Mencegah hacking
  • Memvalidasi ulang semua input
  • Memastikan data konsisten sebelum disimpan ke database

Kesimpulan penting:

Validasi JavaScript memberikan kenyamanan pengguna, tapi validasi server memberikan keamanan.

Jenis-Jenis Validasi Form

Dalam membuat sistem form yang baik, kamu perlu memahami berbagai jenis validasi yang umum digunakan. Setiap form biasanya punya aturan berbeda tergantung kebutuhan, sehingga penting mengetahui jenis validasi mana yang harus diterapkan. Pada bagian ini, kita akan membahas validasi dasar hingga yang sering dipakai dalam aplikasi nyata seperti validasi email, password, angka, dan tanggal.

1. Validasi Required (Input Tidak Boleh Kosong)

Validasi “required” adalah validasi paling dasar dalam form. Tujuannya memastikan bahwa pengguna tidak mengirim form dengan data kosong. Form tanpa data valid akan menyebabkan error atau data tidak berguna di server.

Contoh Kasus:

  • Nama tidak boleh kosong
  • Email wajib diisi
  • Password harus ada

Contoh JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation dengan JavaScript</title>
</head>
<body>
    <form id="regForm" onsubmit="return validateRequired()">
        <input type="text" id="name" placeholder="Nama">
        <button type="submit">Daftar</button>
    </form>

    <script>
        function validateRequired() {
            const name = document.getElementById("name").value;

            if (name.trim() === "") {
                alert("Nama wajib diisi!");
                return false;
            }

            alert('Nama berhasil divalidasi');
            return false;
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

Validasi required biasanya menjadi langkah pertama sebelum form bisa diproses lebih jauh.

2. Validasi Panjang Teks (Min & Max Length)

Beberapa input membutuhkan batasan panjang tertentu, misalnya:

  • Username minimal 4 karakter
  • Password minimal 8 karakter
  • Pesan maksimal 200 karakter

Ini penting agar data konsisten dan tidak merusak layout atau sistem penyimpanan.

Contoh JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation dengan JavaScript</title>
</head>
<body>
    <form id="regForm" onsubmit="return validateLength()">
        <input type="text" id="username" placeholder="Username">
        <button type="submit">Daftar</button>
    </form>

    <script>
        function validateLength() {
            const username = document.getElementById("username").value;

            if (username.length < 4) {
                alert("Username harus minimal 4 karakter!");
                return false;
            }

            if (username.length > 20) {
                alert("Username tidak boleh lebih dari 20 karakter!");
                return false;
            }

            alert('Username berhasil divalidasi');

            return false;
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

3. Validasi Pola (Regex / Regular Expression)

Regex adalah teknik paling fleksibel untuk memeriksa apakah input sesuai pola tertentu. Regex sangat kuat dan digunakan untuk format data seperti:

  • Nomor telepon
  • Hanya huruf
  • Hanya angka
  • Format tertentu (misal: kode pos, username)

Contoh Regex Sederhana:

Hanya huruf & spasi:

/^[A-Za-z\s]+$/

Contoh JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Regex Form Validation</title>
</head>
<body>
    <form id="regForm" onsubmit="return validatePattern()">
        <input type="email" id="email" placeholder="Email">
        <input type="text" id="fullname" placeholder="Nama Lengkap">
        <button type="submit">Daftar</button>
    </form>

    <script>
        function validatePattern() {
            const fullname = document.getElementById("fullname").value;
            const pattern = /^[A-Za-z\s]+$/;

            if (!pattern.test(fullname)) {
                alert("Nama hanya boleh berisi huruf dan spasi!");
                return false;
            }

            alert('Nama berhasil divalidasi');
            return false; // atau true jika ingin form benar-benar submit
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

Regex adalah fondasi penting dalam validasi modern, terutama untuk form kompleks.

4. Validasi Email

Validasi email adalah salah satu validasi paling penting dalam aplikasi apa pun—mulai dari form login, register, hingga newsletter.

Contoh Regex Valid Email:

/^[^\s@]+@[^\s@]+\.[^\s@]+$/

Contoh JavaScript:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation dengan JavaScript</title>
</head>
<body>
    <form id="regForm" onsubmit="return validateEmail()">
        <input type="text" id="name" placeholder="Nama">
        <input type="email" id="email" placeholder="Email">
        <button type="submit">Daftar</button>
    </form>

    <script>
        function validateEmail() {
            const email = document.getElementById("email").value;
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

            if (!emailPattern.test(email)) {
                alert("Format email tidak valid!");
                return false;
            }

            alert('Email berhasil divalidasi');
            return false;
        }
    </script>
</body>
</html>Code language: HTML, XML (xml)

Regex email tidak harus kompleks; yang penting memastikan struktur dasar email benar.

5. Validasi Password (Kekuatan & Struktur)

Validasi password jauh lebih kompleks dan biasanya memiliki aturan seperti:

  • Minimal 8 karakter
  • Mengandung huruf besar
  • Mengandung angka
  • Mengandung simbol
  • Tidak boleh ada spasi

Contoh Regex Password Kuat:

/^(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&+=!]).{8,}$/Code language: PHP (php)

Contoh kode validasi password:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation dengan JavaScript</title>
</head>
<body>
    <form id="regForm" onsubmit="return validatePassword()">
        <input type="password" id="password" placeholder="Password">
        <button type="submit">Validasi</button>
    </form>

    <script>
        function validatePassword() {
            const password = document.getElementById("password").value;
            const strongPass = /^(?=.*[A-Z])(?=.*\d)(?=.*[^A-Za-z0-9]).{8,}$/;

            if (!strongPass.test(password)) {
                alert("Password harus minimal 8 karakter, ada huruf besar, angka, dan simbol!");
                return false;
            }

            alert("Password berhasil divalidasi");
            return false;
        }

    </script>
</body>
</html>Code language: HTML, XML (xml)

Password yang tidak kuat membuat aplikasi rentan terhadap serangan.

6. Validasi Angka, Tanggal, dan Pilihan (Select/Dropdown)

Beberapa tipe data khusus seperti angka dan tanggal memiliki aturan validasinya sendiri.

Validasi Angka (Number)

Pastikan input:

  • Hanya angka
  • Dalam rentang tertentu
  • Tidak negatif

Contoh:

function validateNumber() {
    const age = document.getElementById("age").value;

    if (isNaN(age) || age <= 0) {
        alert("Usia harus berupa angka dan lebih dari 0!");
        return false;
    }

    return true;
}Code language: JavaScript (javascript)

Validasi Tanggal

Validasi tanggal diperlukan untuk:

  • Tanggal lahir minimal 18 tahun
  • Tanggal event tidak boleh sebelum hari ini
function validateDate() {
    const date = new Date(document.getElementById("birthdate").value);
    const today = new Date();

    if (date >= today) {
        alert("Tanggal lahir tidak valid!");
        return false;
    }
    return true;
}Code language: JavaScript (javascript)

Validasi Dropdown / Select

Pengguna sering lupa memilih opsi di dropdown—validasi diperlukan untuk memastikan pilihan tidak default.

function validateSelect() {
    const gender = document.getElementById("gender").value;

    if (gender === "") {
        alert("Pilih jenis kelamin terlebih dahulu!");
        return false;
    }
    return true;
}Code language: JavaScript (javascript)

Bagian ini memberikan dasar semua jenis validasi yang akan kita terapkan pada bagian-bagian berikutnya.

HTML5 Form Validation vs JavaScript Validation

Validasi form di web modern tidak selalu harus langsung memakai JavaScript. Kita sebenarnya sudah dibekali fitur bawaan dari HTML5 yang cukup lengkap. Namun tentu saja, ada batasan tertentu yang membuat JavaScript tetap menjadi pilihan utama untuk kebutuhan validasi yang lebih kompleks dan fleksibel.

Pada bagian ini kita akan membahas perbedaan, kelebihan, kekurangan, serta kapan waktu yang tepat menggunakan masing-masing pendekatan.

1. Fitur Bawaan HTML5 untuk Validasi Form

HTML5 menyediakan beberapa atribut untuk membantu validasi tanpa perlu menulis satu baris JavaScript pun. Beberapa fitur bawaan tersebut meliputi:

  • required
    Menandai input agar wajib diisi.

  • minlength dan maxlength
    Membatasi panjang teks yang boleh dimasukkan pengguna.

  • pattern
    Memvalidasi input berdasarkan pola (regex sederhana).

  • type
    Tipe input tertentu otomatis memiliki validasi bawaan:

    • type="email" → cek format email
    • type="number" → cek apakah angka valid
    • type="url" → cek format URL
    • type="date" → format tanggal valid
    • type="tel" → nomor telepon (tanpa validasi bawaan, tapi tetap membantu input)

  • Pesan error otomatis (default browser message)
    Browser akan menampilkan pesan error tanpa perlu skrip tambahan.

Contoh sederhana:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Form Validation</title>
</head>
<body>
    <form>
        <input type="email" required>
        <button type="submit">Kirim</button>
    </form>
</body>
</html>Code language: HTML, XML (xml)

Contoh sederhana: Browser otomatis akan menolak submit jika format email salah.

Keunggulan HTML5 Validation

  • Mudah digunakan, tidak butuh JavaScript sama sekali.
  • Sudah otomatis di-handle oleh browser.
  • Efisien untuk form sederhana.
  • Hemat waktu untuk validasi dasar.

2. Keterbatasan Validasi HTML5

Walaupun praktis, HTML5 juga memiliki limitasi yang membuatnya tidak selalu cukup untuk kebutuhan proyek modern.

  • Pesan error bawaan tidak fleksibel
    Setiap browser menampilkan pesan yang berbeda-beda dan sulit diseragamkan.

  • Custom rule sangat terbatas
    Atribut seperti pattern hanya menerima regex dasar, dan tidak bisa membuat logika conditional yang kompleks.

  • Sulit membuat real-time validation
    HTML5 hanya memvalidasi ketika form di-submit, bukan saat user mengetik (kecuali dikombinasikan dengan JS).

  • Tidak bisa memvalidasi via server
    Misalnya untuk cek:

    • Username sudah digunakan atau belum
    • Validasi dengan database
    • Cek token atau keamanan input lain
    • Tidak bisa menambahkan UI interaktif

Ini hanya bisa dilakukan dengan JavaScript.

3. Kapan Harus Menggunakan JavaScript Validation?

Gunakan JavaScript ketika:

  • Membutuhkan validasi real-time
    Misalnya langsung menampilkan “password terlalu lemah” saat user mengetik.

  • Butuh kontrol penuh terhadap pesan error
    Contoh: menampilkan pesan error yang lebih ramah atau sesuai desain.

  • Ingin membuat validasi yang kompleks
    Misalnya:

    • Password harus memiliki huruf besar, simbol, angka, dan minimal 8 karakter
    • Mencocokkan password dengan konfirmasi password
    • Validasi format nomor telepon internasional
    • Validasi input berdasarkan pilihan sebelumnya

  • Perlu interaksi UI
    JavaScript memungkinkan:

    • Highlight elemen error
    • Tooltip error
    • Icon valid/invalid
    • Men-disable tombol submit sampai valid

  • Perlu logika dinamis
    Contoh:

    • Field tertentu hanya muncul jika pilihan lain dipilih
    • Aturan validasi berubah berdasarkan input user

Contoh Perbandingan HTML5 vs JavaScript

HTML5 Validation

<form>
    <input type="email" required>
    <input type="password" minlength="8" required>
    <button type="submit">Daftar</button>
</form>Code language: HTML, XML (xml)

Kelebihan: mudah

Kekurangan: tidak bisa membuat logika validasi mendalam

JavaScript Validation

<form id="registerForm">
        <input type="email" id="email">
        <input type="password" id="password">
        <button type="submit">Daftar</button>
</form>

<script>
    document.getElementById("registerForm").addEventListener("submit", function (e) {

        let email = document.getElementById("email").value;
        let pass  = document.getElementById("password").value;

        let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

        if (!emailPattern.test(email)) {
                alert("Format email tidak valid!");
                e.preventDefault();
                return;
        }

        if (pass.length < 8) {
                alert("Password minimal 8 karakter!");
                e.preventDefault();
                return;
        }

        alert("Valid!");
    });
</script>Code language: HTML, XML (xml)

Kelebihan:

  • Pesan error bisa dibuat custom
  • Bisa ditambahkan UI atau animasi
  • Bisa melakukan validasi lebih kompleks

HTML5 validation sangat cocok untuk form sederhana dan cepat. Namun untuk kebutuhan proyek web modern yang memiliki aturan validasi khusus, UI interaktif, dan pesan error yang fleksibel, JavaScript masih menjadi solusi terbaik.

Dasar Validasi Form dengan JavaScript

Validasi form dengan JavaScript memiliki pola dasar yang hampir selalu dipakai di berbagai proyek web. Baik pada form login, form pendaftaran, checkout, maupun input sederhana seperti kontak atau komentar, semuanya dimulai dari empat konsep inti:

  • Menangani event onsubmit
  • Mencegah form dikirim sebelum valid
  • Mengambil nilai input
  • Menampilkan pesan error yang jelas

Jika keempat konsep ini dipahami dengan baik, kamu bisa membangun validasi dari yang paling sederhana sampai yang kompleks.

Di bagian ini kita akan mempelajari pondasi utamanya.

1. Event onsubmit — Titik Masuk Validasi

Event onsubmit adalah event yang dipicu ketika pengguna menekan tombol “submit” pada form. JavaScript dapat “menyadap” event ini untuk memeriksa apakah data valid sebelum form dikirim ke server.

Ada dua cara umum menggunakan event ini:

Inline (langsung pada tag HTML)

<form onsubmit="return validateForm()">
    <input type="text" id="username">
    <button type="submit">Kirim</button>
</form>

<script>
    function validateForm() {
        console.log("Form disubmit");
        return false;
    }
</script>Code language: HTML, XML (xml)

Namun metode inline kurang direkomendasikan karena:

  • Mencampur HTML dan logika JS
  • Sulit di-maintain
  • Tidak scalable untuk form besar

Menggunakan Event Listener (cara modern & direkomendasikan)

<form id="myForm">
    <input type="text" id="username">
    <button type="submit">Kirim</button>
</form>

<script>
    const form = document.getElementById("myForm");

    form.addEventListener("submit", function (event) {
        console.log("Submit terdeteksi!");
    });
</script>Code language: HTML, XML (xml)

Metode ini bersih, terstruktur, dan sesuai praktik modern.

2. Preventing Form Submit — Mencegah Form Dikirim

Pada hampir semua validasi form, kita tidak ingin form langsung terkirim jika ada input yang salah. Di JavaScript, ini dilakukan dengan:

event.preventDefault()

Fungsi ini menghentikan proses submit sehingga halaman tidak reload dan data tidak terkirim.

Contoh:

<form id="loginForm">
    <input type="text" id="username">
    <button type="submit">Login</button>
</form>

<script>
    document.getElementById("loginForm").addEventListener("submit", function (e) {

        e.preventDefault(); // cegah submit dulu

        console.log("Form dihentikan untuk validasi!");

    });
</script>Code language: HTML, XML (xml)

Dengan ini, kamu bisa memeriksa input terlebih dahulu sebelum mengizinkan form dikirim.

3. Mengambil Nilai Input

Setelah mencegah submit, langkah berikutnya adalah mengambil nilai dari input form.

Cara paling umum:

Pakai document.getElementById()

let username = document.getElementById("username").value;Code language: JavaScript (javascript)

Kedua cara ini valid, tetapi querySelector() lebih fleksibel karena mendukung seluruh selector CSS.

Contoh lengkap:

<form id="formExample">
    <input type="text" id="username">
    <input type="email" id="email">
    <button type="submit">Kirim</button>
</form>

<script>
    document.getElementById("formExample").addEventListener("submit", function (e) {
        e.preventDefault();

        let username = document.getElementById("username").value;
        let email    = document.getElementById("email").value;

        console.log(username, email);
    });
</script>Code language: HTML, XML (xml)

4. Menampilkan Pesan Error

Validasi tidak lengkap tanpa menampilkan pesan error yang jelas kepada pengguna. Ada tiga pendekatan populer:

Menampilkan pesan di bawah input

Buat elemen yang akan diisi pesan:

<input type="text" id="username">
<small id="usernameError" class="error"></small>Code language: HTML, XML (xml)

JavaScript

document.getElementById("usernameError").textContent = "Username tidak boleh kosong!";Code language: JavaScript (javascript)

Menampilkan error menggunakan alert() (cara lama, tidak direkomendasikan)

alert("Email tidak valid!");Code language: JavaScript (javascript)

Kekurangan:

  • Tidak ramah UI
  • Mengganggu pengalaman pengguna

Menambahkan class error (untuk styling CSS)

CSS:

.error-border {
    border: 2px solid red;
}Code language: CSS (css)

JavaScript:

document.getElementById("username").classList.add("error-border");Code language: JavaScript (javascript)

Metode ini sangat efektif jika dikombinasikan dengan pesan error di bawah input.

Contoh: Implementasi Dasar Validasi

Berikut contoh implementasi dasar validasi form lengkap.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 Form Validation</title>
</head>
<body>
    <form id="basicForm">
        <input type="text" id="name">
        <small id="errorName" class="error"></small>

        <button type="submit">Kirim</button>
    </form>

    <script>
        const form = document.getElementById("basicForm");

        form.addEventListener("submit", function (e) {
                e.preventDefault();

                let name = document.getElementById("name").value;
                let errorField = document.getElementById("errorName");

                if (name.trim() === "") {
                        errorField.textContent = "Nama wajib diisi!";
                        return;
                }

                errorField.textContent = "";

                alert("Form valid!");
        });
    </script>

</body>
</html>Code language: HTML, XML (xml)

Pada contoh di atas:

  • Submit dicegah dulu
  • Nilai diambil
  • Data dicek
  • Pesan error ditampilkan bila salah

Ini adalah pola dasar validasi manual dengan JavaScript.

Validasi Email dengan Regex (Pemeriksaan Format Email dengan JavaScript)

Validasi email adalah salah satu bagian paling penting dalam form validation JavaScript. Hampir semua form — seperti login, register, newsletter, komentar, checkout, hingga recovery password — membutuhkan validasi email yang benar. Validasi email tidak bisa hanya mengandalkan HTML5 karena sering kali formatnya masih longgar. Di sinilah regex untuk validasi email JavaScript menjadi sangat berguna.

Pada bagian ini kita akan membahas:

  • Regex email yang aman dan umum digunakan
  • Cara mengecek format email
  • Contoh validasi email secara real-time
  • Studi kasus login & register
  • Best practice agar validasi email tetap aman

1. Regex Email yang Aman untuk Validasi Form JavaScript

Regex sangat penting dalam validasi input form JavaScript, terutama untuk memeriksa apakah input email memiliki struktur yang valid. Namun perlu dipahami bahwa tidak ada regex email yang benar-benar sempurna, karena standar email (RFC 5322) sangat kompleks. Yang kita butuhkan adalah regex yang aman, ringan, dan realistis untuk kebutuhan web modern.

Regex email ringan dan aman (direkomendasikan)

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;Code language: JavaScript (javascript)

Mengapa regex ini direkomendasikan?

  • Cukup ketat untuk mencegah format salah
  • Tidak terlalu kompleks hingga menghambat performa
  • Cocok untuk login, register, dan validasi umum
  • Digunakan oleh banyak developer karena stabil

Regex yang lebih ketat

const strictEmailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;Code language: JavaScript (javascript)

Regex ini:

  • Memastikan domain hanya huruf
  • Memastikan nama domain dan ekstensi valid
  • Miminimalisasi email spammy atau tidak standar

Namun, jangan gunakan regex yang terlalu ekstrem atau panjang hingga sulit diproses, terutama pada form real-time.

2. Cara Cek Format Email dengan JavaScript

Setelah memiliki regex, proses pengecekannya sangat sederhana:

function validateEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}Code language: JavaScript (javascript)

Contoh pemakaian:

let email = document.getElementById("email").value;

if (!validateEmail(email)) {
    console.log("Email tidak valid!");
}Code language: JavaScript (javascript)

Prinsipnya:

  1. Ambil nilai email
  2. Cek dengan .test()
  3. Beri feedback ke pengguna

3. Contoh Validasi Email Real-time (Saat User Mengetik)

Real-time validation sangat populer dalam UI modern karena memberikan pengalaman terbaik. Ketika pengguna mengetik email, langsung ditampilkan pesan apakah email valid atau tidak.

Contoh real-time validation:

<input type="email" id="email">
<small id="emailError"></small>

<script>
    const emailInput   = document.getElementById("email");
    const emailError   = document.getElementById("emailError");
    const emailRegex   = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    emailInput.addEventListener("input", function () {

        if (emailInput.value.trim() === "") {
            emailError.textContent = "";
            return;
        }

        if (!emailRegex.test(emailInput.value)) {
            emailError.textContent = "Format email tidak valid!";
            emailError.style.color = "red";
        } else {
            emailError.textContent = "Email valid ✓";
            emailError.style.color = "green";
        }
    });
</script>Code language: HTML, XML (xml)

Keunggulan real-time validation:

  • Mempercepat pengguna memperbaiki kesalahan
  • Meningkatkan konversi pada form register/login
  • Mengurangi error saat form disubmit
  • Memberikan pengalaman profesional

4. Studi Kasus Validasi Email pada Form Login

Pada login, validasi email biasanya minimalis: cukup cek format email sudah benar dan field tidak kosong.

Contoh validasi untuk login:

<form id="loginForm">
    <input type="email" id="loginEmail" placeholder="Email">
    <small id="loginEmailError"></small>

    <button type="submit">Login</button>
</form>

<script>
    const formLogin = document.getElementById("loginForm");
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    formLogin.addEventListener("submit", function (e) {
        e.preventDefault();

        let email  = document.getElementById("loginEmail").value;
        let error  = document.getElementById("loginEmailError");

        if (email.trim() === "") {
            error.textContent = "Email wajib diisi!";
            return;
        }

        if (!emailRegex.test(email)) {
            error.textContent = "Format email salah!";
            return;
        }

        error.textContent = "";
        alert("Login sukses! Data siap dikirim.");
    });
</script>Code language: HTML, XML (xml)

5. Studi Kasus Validasi Email pada Form Register

Pada form register, validasi email biasanya lebih ketat dan dilengkapi pengecekan tambahan seperti:

  • Email harus valid
  • Email belum dipakai
  • Email mengandung domain yang diizinkan
  • Format email sesuai perusahaan atau instansi (jika diperlukan)

Contoh validasi register sederhana:

<form id="registerForm">
    <input type="email" id="regEmail" placeholder="Email">
    <small id="regEmailError"></small>

    <button type="submit">Daftar</button>
</form>

<script>
    const formReg = document.getElementById("registerForm");
    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

    formReg.addEventListener("submit", function (e) {
        e.preventDefault();

        let email = document.getElementById("regEmail").value;
        let error = document.getElementById("regEmailError");

        if (email.trim() === "") {
            error.textContent = "Email wajib diisi!";
            return;
        }

        if (!emailRegex.test(email)) {
            error.textContent = "Email tidak sesuai format!";
            return;
        }

        error.textContent = "";
        alert("Register berhasil! Email valid.");
    });
</script>Code language: HTML, XML (xml)

6. Best Practice Validasi Email dengan JavaScript

Untuk memastikan validasi email aman dan optimal, ikuti best practice berikut:

Jangan gunakan regex terlalu kompleks

Regex super panjang tidak menjamin keamanan.

Selalu kombinasikan dengan validasi Back-End

Validasi JavaScript dapat dibypass dengan DevTools.

Berikan pesan error yang ramah

Contoh pesan yang jelas:

Format email tidak valid. Gunakan format seperti nama@domain.com.

Gunakan real-time validation pada form penting

Seperti login, register, checkout.

Sanitasi input (hilangkan spasi dan karakter tak perlu)

Gunakan:

email = email.trim().toLowerCase();

Dengan begitu maka email akan lebih safety dan juga mengurangi kesalahan dalam penulisan.

Validasi Password JavaScript

Validasi password adalah salah satu bagian paling penting dalam form validation JavaScript, terutama pada halaman register, login, reset password, atau perubahan password. Password yang lemah dapat memicu masalah keamanan seperti pembobolan akun, brute force, dan pencurian data. Karena itu, dalam validasi form modern, password wajib diperiksa dengan beberapa aturan seperti panjang minimal, kombinasi karakter, hingga kecocokan antara password dan konfirmasi password (password match).

Di bagian ini kita akan membahas:

  • Panjang minimal password
  • Syarat ada karakter khusus
  • Syarat ada angka
  • Validasi password match
  • Contoh kasus pada register form

1. Minimal Panjang Password

Aturan yang paling dasar adalah minimal jumlah karakter. Biasanya:

  • 8 karakter → standar umum
  • 10–12 karakter → lebih aman
  • 6 karakter → terlalu lemah

Contoh dasar validasinya:

if (password.length < 8) {
    error.textContent = "Password minimal 8 karakter!";
}Code language: HTML, XML (xml)

Mengapa panjang minimal penting?

  • Mencegah brute-force sederhana
  • Meningkatkan kombinasi kemungkinan
  • Meningkatkan kekuatan keamanan

2. Password Harus Mengandung Karakter Khusus

Karakter khusus seperti @, #, $, %, !, * sangat penting untuk meningkatkan kerumitan password.

Regex dasar karakter khusus:

const specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/;Code language: JavaScript (javascript)

Cara cek:

if (!specialCharRegex.test(password)) {
    error.textContent = "Password harus mengandung minimal 1 karakter khusus.";
}Code language: JavaScript (javascript)

Manfaatnya:

  • Membuat password lebih unik
  • Menyulitkan serangan brute-force
  • Memberikan perlindungan tambahan

3. Password Harus Mengandung Angka

Sebagian pengguna membuat password yang terlalu sederhana seperti “abcdefg”, “password”, atau “sayauser”. Dengan menambahkan syarat angka, password menjadi lebih kuat.

Regex angka:

const numberRegex = /[0-9]/;Code language: JavaScript (javascript)

Cara cek:

if (!numberRegex.test(password)) {
    error.textContent = "Password harus mengandung minimal 1 angka.";
}Code language: JavaScript (javascript)

4. Validasi “Password Match” (Cocok dengan Konfirmasi Password)

Saat registrasi, selalu ada field:

  • Password
  • Konfirmasi Password

Validasi ini mencegah input yang salah karena typo atau ketidaksengajaan.

Cara cek:


let password = document.getElementById("password").value;
let confirmPassword = document.getElementById("confirmPassword").value;
let confirmError = document.getElementById("confirmError");

if (password !== confirmPassword) {
    confirmError.textContent = "Password tidak sama!";
}Code language: JavaScript (javascript)

Ini penting untuk:

  • Mengurangi kesalahan input
  • Memvalidasi kesesuaian sebelum data dikirim
  • Meningkatkan pengalaman pengguna

5. Contoh Kasus: Validasi Password pada Register Form

Berikut contoh validasi password lengkap untuk kebutuhan form register. Contoh ini memadukan semua konsep: panjang minimal, karakter khusus, angka, dan password match.

Contoh kode HTML:

<form id="registerForm">
    <input type="password" id="password" placeholder="Password">
    <small id="passwordError"></small>

    <input type="password" id="confirmPassword" placeholder="Konfirmasi Password">
    <small id="confirmError"></small>

    <button type="submit">Daftar</button>
</form>Code language: HTML, XML (xml)

Contoh kode JavaScript:

document.getElementById("registerForm").addEventListener("submit", function (e) {
    e.preventDefault();

    let password          = document.getElementById("password").value;
    let confirmPassword   = document.getElementById("confirmPassword").value;

    let passwordError     = document.getElementById("passwordError");
    let confirmError      = document.getElementById("confirmError");

    passwordError.textContent = "";
    confirmError.textContent  = "";

    const specialCharRegex = /[!@#$%^&*(),.?":{}|<>]/;
    const numberRegex      = /[0-9]/;

    if (password.length < 8) {
        passwordError.textContent = "Password minimal 8 karakter!";
        return;
    }

    if (!numberRegex.test(password)) {
        passwordError.textContent = "Password harus mengandung angka.";
        return;
    }

    if (!specialCharRegex.test(password)) {
        passwordError.textContent = "Password harus mengandung karakter khusus.";
        return;
    }

    if (password !== confirmPassword) {
        confirmError.textContent = "Password tidak sama!";
        return;
    }

    alert("Registrasi berhasil! Password valid.");
});Code language: JavaScript (javascript)

Mengapa Validasi Password Penting dalam Form Validation JavaScript?

  • Pengguna tidak selalu sadar membuat password lemah
  • Developer perlu memaksa standar keamanan minimum
  • Keamanan akun sangat bergantung pada kualitas password
  • Kombinasi validasi front-end + back-end memberikan perlindungan terbaik

Kesimpulan

Validasi form dengan JavaScript adalah langkah penting untuk memastikan data yang dikirim pengguna benar, aman, dan sesuai kebutuhan. Dengan memanfaatkan teknik seperti pengecekan required, regex, validasi email dan password, developer dapat meningkatkan kualitas data sekaligus melindungi aplikasi dari kesalahan dan potensi serangan.

Menguasai validasi form membuat proses input lebih nyaman bagi pengguna, membantu mencegah error sejak dini, dan memperkuat keamanan aplikasi. Setelah memahami dasar-dasar ini, kamu bisa melanjutkan ke topik lanjutan seperti keamanan input, XSS prevention, dan validasi back-end untuk perlindungan yang lebih lengkap.

Share on

1 JavaScript Dasar

2 JavaScript Menengah

Level Menengah fokus pada kemampuan yang lebih luas, seperti manipulasi DOM, event JavaScript, form validation, JSON, LocalStorage, SessionStorage, hingga asynchronous JavaScript dasar. Level ini membantu pengguna memahami bagaimana JavaScript bekerja untuk membuat website lebih interaktif dan dinamis, sangat relevan untuk tutorial dasar yang mengarahkan ke kemampuan membuat fitur web praktis.

3 JavaScript Lanjutan

4 JavaScript Mahir

5 JavaScript Ahli

Related article!

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Alamat email Anda tidak akan dipublikasikan. Required fields are marked *