Cara Membuat Validasi Form dengan JavaScript

Cara Membuat Validasi Form dengan JavaScript – Validasi Form yang dibuat dengan JavaScript adalah proses penting dalam pengembangan aplikasi web. Ini membantu memastikan bahwa data yang dimasukkan oleh pengguna ke dalam formulir web sesuai dengan kriteria atau format yang diharapkan sebelum formulir tersebut dikirimkan.

Tujuannya adalah untuk mencegah pengguna dari mengirimkan data yang tidak valid atau tidak lengkap ke server. Saat ini, kelasjava akan mengajak kamu untuk membuat validasi form dengan menggunakan JavaScript. Mari kita lihat bagaimana cara membuat form validasi dengan cepat dan sangat mudah menggunakan JS dibawah ini.

Alat yang Dibutuhkan untuk Membuat Validasi Form

Sebelum kita mulai membuat validasi form menggunakan JavaScript, pastikan kamu telah menyiapkan beberapa alat penting berikut:

Perangkat laptop.
Sublime Text (Editor kode teks).
Google Chrome (Peramban web).
Niat yang kuat untuk belajar dan berkarya.

Langkah-langkah Membuat Validasi Form dengan JavaScript

1. Buat Folder dan File Proyek

Buatlah folder untuk proyek validasi form yang akan kamu buat dan buatlah tiga file: index.html, style.css, dan script.js di dalam folder proyek tersebut.

2. Buat Kode HTML (index.html)

Tambahkan struktur HTML untuk membuat validasi form, untuk kode CSS dari web validasi form tersebut bisa salin kode dibawah ini.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h2>Form Registrasi</h2>
        <form id="registrationForm">
            <div class="form-group">
                <label for="username">Username:</label>
                <input type="text" id="username" name="username">
                <span class="error" id="usernameError"></span>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email">
                <span class="error" id="emailError"></span>
            </div>
            <div class="form-group">
                <label for="password">Password:</label>
                <input type="password" id="password" name="password">
                <span class="error" id="passwordError"></span>
            </div>
            <button type="submit">Submit</button>
        </form>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Buat Kode CSS (style.css)

Desain tampilan halaman web untuk mempercantik validasi form menggunakan CSS, untuk kode CSS dari validasi form tersebut bisa salin kode dibawah ini.

body {
    font-family: Arial, sans-serif;
    background-color: #f2f2f2;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
}

label {
    display: block;
    font-weight: bold;
}

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.error {
    color: red;
    font-size: 0.8em;
}

button {
    padding: 10px 20px;
    background-color: #008CBA;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005f6b;
}

4. Buat Kode JavaScript (script.js)

Buat kode JavaScript untuk melakukan validasi form agar menjadi fungsionalitas, adapun kode JavaScript dari website validasi form tersebut bisa salin kode dibawah ini.

const form = document.getElementById('registrationForm');

form.addEventListener('submit', function(event) {
    event.preventDefault();
    validateForm();
});

function validateForm() {
    const username = document.getElementById('username').value.trim();
    const email = document.getElementById('email').value.trim();
    const password = document.getElementById('password').value.trim();

    const usernameError = document.getElementById('usernameError');
    const emailError = document.getElementById('emailError');
    const passwordError = document.getElementById('passwordError');

    usernameError.textContent = '';
    emailError.textContent = '';
    passwordError.textContent = '';

    if (username === '') {
        usernameError.textContent = 'Username harus diisi';
    }

    if (email === '') {
        emailError.textContent = 'Email harus diisi';
    } else if (!isValidEmail(email)) {
        emailError.textContent = 'Email tidak valid';
    }

    if (password === '') {
        passwordError.textContent = 'Password harus diisi';
    } else if (password.length < 6) {
        passwordError.textContent = 'Password harus memiliki minimal 6 karakter';
    }
}

function isValidEmail(email) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
}

5. Jalankan Kode

Setelah semua kode HTML, CSS, dan JavaScript ditulis, jalankan kode tersebut dengan membuka file index.html pada folder yang kamu simpan tadi atau bisa juga dengan melakukan klik kanan pada kode index.html lalu pilih “Open in Browser”.

6. Tampilkan Hasil

Selamat! Kamu telah berhasil membuat Validasi Form dengan JavaScript dan membuat tampilan form menjadi responsif menggunakan CSS, bisa dilihat untuk tampilan validasinya sesuai dengan masing-masing formnya.

Kesimpulan

Sekian langkah-langkah mengenai Cara Membuat Validasi Form dengan JavaScript. Dengan mengikuti panduan ini, kamu dapat meningkatkan pengalaman pengguna dengan memastikan data yang masuk ke dalam formulir webmu sesuai dengan harapan.