Halo sahabat koding, dalam artikel ini saya akan membahas bagaimana cara membuat validasi form menggunakan Javascript.
Ada tiga file yang akan kita gunakan, yaitu file HTML, CSS, dan Javascript. Berikut ini fungsi dari tiga file tersebut:
- File HTML berisi kode dari form itu sendiri.
- File CSS berisi kode untuk memperindah form HTML.
- File Javascript berisi kode untuk memvalidasi form HTML.
Sebelum kita mulai, saya akan menjelaskan skenario dari validasi form yang akan kita buat. Pertama, form yang akan kita buat memiliki empat isian (input), yaitu: Username, Email, Password, dan Confirm Password.
Kedua, script validasi form akan berfungsi untuk memvalidasi masukan sebagai berikut:
- Memvalidasi semua masukan. Script akan memberikan peringatan jika ada masukan yang tidak diisi (kosong).
- Memvalidasi email address. Script akan memberikan peringatan jika penulisan email salah.
- Memvalidasi password. Password minimal harus delapan karakter. Script akan memberikan peringatan jika password kurang dari delapan karakter.
- Memvalidasi confirm password. Isian pada field Password dan Confirm Password harus sama. Script akan memberikan peringatan jika isian kedua field tidak sama.
Selanjutnya, mari kita mulai membuat form html dengan script sebagai berikut:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
<form id="form" method="post" action="./">
<h1>Registration</h1>
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="email">Email</label>
<input id="email" name="email" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password">Password</label>
<input id="password" name="password" type="text">
<div class="error"></div>
</div>
<div class="input-control">
<label for="password2">Confirm Password</label>
<input id="password2" name="password2" type="text">
<div class="error"></div>
</div>
<button type="submit">Sign up</button>
</form>
</div>
</body>
</html>
Penjelasan: index.html
Berikut penjelasan script HTML tersebut secara lengkap namun mudah dipahami. Script ini adalah sebuah halaman Form Registrasi yang memiliki input untuk username, email, password, dan konfirmasi password, serta dikombinasikan dengan CSS (style.css) dan JavaScript (script.js) untuk mempercantik tampilan dan melakukan validasi.
Head dan Body
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
<script defer src="script.js"></script>
</head>
<body>
<div class="container">
- <link rel=”stylesheet” href=”style.css”>: Menghubungkan halaman dengan file CSS → styling tampilan.
- <script defer src=”script.js”></script>: Menghubungkan halaman dengan file JavaScript.
- `defer` berarti script akan dijalankan setelah HTML selesai dimuat, tidak menghambat rendering.
- <div class=”container”>: Pembungkus utama layout (diatur lewat CSS).
Form Registrasi
<form id="form" method="post" action="./">
- <form ….> → elemen form yang akan mengambil input.
- id=”form” → agar JavaScript dapat menyeleksi form.
- method=”post” → data dikirim ke server dengan metode POST.
- action=”./” → data diarahkan ke alamat halaman itu sendiri (root folder saat ini).
Struktur Input
<div class="input-control">
<label for="username">Username</label>
<input id="username" name="username" type="text">
<div class="error"></div>
</div>
Setiap input dibungkus oleh: <div class=”input-control”>
- <label>: Teks yang menjelaskan input apa itu.
- for=”username”: Terhubung dengan `id=”username”` (klik label fokus ke input).
- <input>: Tempat user mengetik data.
- name=”username”: Nama variabel saat dikirim ke server.
- <div class=”error”></div>: Tempat menampilkan pesan error validasi.
Ada 4 input yang sama strukturnya:
- Username
- Password
- Confirm Password
Tombol Submit
<button type="submit">Sign up</button>
- Saat diklik → form akan mencoba submit.
- Namun, karena script.js memakai `preventDefault()` untuk validasi, form tidak langsung dikirim.
Cara Kerja Form (Flow)
- User membuka halaman → tampilan form ditata oleh style.css.
- User mengisi input.
- Ketika klik Sign Up → event submit tertangkap di script.js
- JavaScript mem-validasi form:
- Jika input salah → tampil error di <div class=”error”></div>.
- Jika benar → bisa lanjut submit (manual via JS).
Selanjutnya, mari kita membuat file style.css sebagai berikut:
style.css
body {
background: linear-gradient(to right, #0f2027, #203a43, #2c5364);
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
#form {
width: 300px;
margin: 20vh auto 0 auto;
padding: 20px;
background-color: whitesmoke;
border-radius: 5px;
font-size: 12px;
}
#form h1 {
color: #0f2027;
text-align: center;
}
#form button {
padding: 10px;
margin-top: 10px;
width: 100%;
color: white;
background-color: rgb(41, 57, 194);
border: none;
border-radius: 5px;
}
.input-control {
display: flex;
flex-direction: column;
}
.input-control input {
border: 3px solid #f0f0f0;
border-radius: 5px;
display: block;
font-size: 12px;
padding: 10px;
}
.input-control input:focus {
outline: 0;
}
.input-control.success input {
border-color: #09c372;
}
.input-control.error input {
border-color: #ff3860;
}
.input-control .error {
color: #ff3860;
font-size: 9px;
height: 13px;
}
Selanjutnya, mari kita membuat file script.js sebagai berikut:
script.js
const form = document.getElementById("form");
const username = document.getElementById("username");
const email = document.getElementById("email");
const password = document.getElementById("password");
const password2 = document.getElementById("password2");
form.addEventListener("submit", e => {
e.preventDefault();
validateInputs();
});
const setError = (element, message) => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector(".error");
errorDisplay.innerText = message;
inputControl.classList.add("error");
inputControl.classList.remove("success")
}
const setSuccess = element => {
const inputControl = element.parentElement;
const errorDisplay = inputControl.querySelector(".error");
errorDisplay.innerText = "";
inputControl.classList.add("success");
inputControl.classList.remove("error");
};
const isValidEmail = email => {
const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
const validateInputs = () => {
const usernameValue = username.value.trim();
const emailValue = email.value.trim();
const passwordValue = password.value.trim();
const password2Value = password2.value.trim();
if(usernameValue === ""){
setError(username, "Username is required");
} else {
setSuccess(username);
}
if(emailValue === ""){
setError(email, "Email is required");
} else if(!isValidEmail(emailValue)){
setError(email, "Provide a valid email adddress");
} else {
setSuccess(email);
}
if(passwordValue === ""){
setError(password, "Password is required");
} else if(passwordValue.length < 8){
setError(password, "Password must be at least 8 character");
} else {
setSuccess(password);
}
if(password2Value === ""){
setError(password2, "Please confirm your password");
} else if(password2Value !== passwordValue){
setError(password2, "Password doesn't match");
} else {
setSuccess(password2);
}
}Lihat hasil: form
Salam
