Form validation adalah proses memvalidasi input pengguna sebelum data dikirim ke server. HTML5 menyediakan fitur validasi form bawaan yang powerful tanpa memerlukan JavaScript. Dengan menggunakan atribut validasi HTML5, Anda dapat membuat form yang user-friendly, aman, dan meningkatkan user experience. Artikel ini akan membahas secara lengkap cara membuat form validation dengan HTML5 menggunakan berbagai atribut dan teknik yang efektif.
Daftar isi
Baca juga: Mengenal Aksesibilitas (Accessibility) dalam HTML
Mengapa Form Validation HTML5 Penting?
Form validation HTML5 memberikan banyak keuntungan untuk website Anda:
Manfaat Form Validation
- User Experience Lebih Baik: Feedback langsung saat pengguna mengisi form
- Keamanan Data: Validasi di client-side sebagai lapisan pertahanan pertama
- Mengurangi Server Load: Filter input invalid sebelum sampai ke server
- Tanpa JavaScript: Validasi bawaan browser tanpa kode tambahan
- Mobile-Friendly: Keyboard yang sesuai muncul otomatis (email, number, dll)
- Accessibility: Pesan error yang accessible untuk screen reader
Atribut Validasi HTML5 Dasar
HTML5 menyediakan berbagai atribut untuk validasi form yang dapat dikombinasikan sesuai kebutuhan.
1. Atribut Required
Atribut required memastikan field harus diisi sebelum form dapat disubmit.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation - Required</title>
</head>
<body>
<form action="/submit" method="post">
<h2>Formulir Pendaftaran</h2>
<!-- Input text dengan required -->
<div class="form-group">
<label for="nama">Nama Lengkap</label>
<input
type="text"
id="nama"
name="nama"
required
>
</div>
<!-- Email dengan required -->
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required
>
</div>
<!-- Textarea dengan required -->
<div class="form-group">
<label for="pesan">Pesan</label>
<textarea
id="pesan"
name="pesan"
required
></textarea>
</div>
<button type="submit">Kirim</button>
</form>
</body>
</html>Code language: HTML, XML (xml)Berikut ini adalah contoh hasil dari kode validasi sederhana diatas.
2. Atribut Pattern
Atribut pattern menggunakan regular expression untuk validasi format input yang spesifik.
<form action="/submit" method="post">
<!-- Nomor telepon Indonesia -->
<div class="form-group">
<label for="telepon">Nomor Telepon</label>
<input
type="tel"
id="telepon"
name="telepon"
pattern="[0-9]{10,13}"
title="Masukkan nomor telepon 10-13 digit"
placeholder="08123456789"
required
>
</div>
<!-- Username (huruf dan angka, 3-16 karakter) -->
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9]{3,16}"
title="Username harus 3-16 karakter, hanya huruf dan angka"
required
>
</div>
<!-- Kode pos (5 digit) -->
<div class="form-group">
<label for="kodepos">Kode Pos</label>
<input
type="text"
id="kodepos"
name="kodepos"
pattern="[0-9]{5}"
title="Kode pos harus 5 digit angka"
placeholder="12345"
required
>
</div>
<!-- Password (minimal 8 karakter, harus ada huruf dan angka) -->
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Password minimal 8 karakter, harus mengandung huruf besar, huruf kecil, dan angka"
required
>
</div>
<button type="submit">Daftar</button>
</form>Code language: HTML, XML (xml)3. Atribut Min dan Max
Atribut min dan max digunakan untuk membatasi nilai input number, date, atau range.
<form action="/submit" method="post">
<!-- Number dengan min dan max -->
<div class="form-group">
<label for="usia">Usia</label>
<input
type="number"
id="usia"
name="usia"
min="17"
max="100"
required
>
<small>Usia minimal 17 tahun</small>
</div>
<!-- Date dengan min dan max -->
<div class="form-group">
<label for="tanggal">Tanggal Reservasi</label>
<input
type="date"
id="tanggal"
name="tanggal"
min="2024-10-15"
max="2024-12-31"
required
>
</div>
<!-- Range dengan min dan max -->
<div class="form-group">
<label for="rating">Rating (1-10)</label>
<input
type="range"
id="rating"
name="rating"
min="1"
max="10"
value="5"
>
<output for="rating">5</output>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)4. Atribut MinLength dan MaxLength
Atribut minlength dan maxlength membatasi panjang karakter input text atau textarea.
<form action="/submit" method="post">
<!-- Input dengan minlength dan maxlength -->
<div class="form-group">
<label for="nama-lengkap">Nama Lengkap</label>
<input
type="text"
id="nama-lengkap"
name="nama"
minlength="3"
maxlength="50"
required
>
<small>Minimal 3 karakter, maksimal 50 karakter</small>
</div>
<!-- Textarea dengan minlength dan maxlength -->
<div class="form-group">
<label for="deskripsi">Deskripsi</label>
<textarea
id="deskripsi"
name="deskripsi"
minlength="10"
maxlength="500"
rows="5"
required
></textarea>
<small>Minimal 10 karakter, maksimal 500 karakter</small>
</div>
<button type="submit">Kirim</button>
</form>Code language: HTML, XML (xml)Input Types HTML5 dengan Validasi Bawaan
HTML5 menyediakan berbagai input types yang memiliki validasi bawaan.
<form action="/submit" method="post">
<!-- Email - validasi format email otomatis -->
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
placeholder="nama@example.com"
required
>
</div>
<!-- URL - validasi format URL otomatis -->
<div class="form-group">
<label for="website">Website</label>
<input
type="url"
id="website"
name="website"
placeholder="https://example.com"
required
>
</div>
<!-- Tel - keyboard telepon di mobile -->
<div class="form-group">
<label for="phone">Telepon</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="08123456789"
required
>
</div>
<!-- Number - hanya menerima angka -->
<div class="form-group">
<label for="jumlah">Jumlah</label>
<input
type="number"
id="jumlah"
name="jumlah"
min="1"
max="100"
step="1"
required
>
</div>
<!-- Date - date picker otomatis -->
<div class="form-group">
<label for="tanggal-lahir">Tanggal Lahir</label>
<input
type="date"
id="tanggal-lahir"
name="tanggal_lahir"
required
>
</div>
<!-- Time - time picker otomatis -->
<div class="form-group">
<label for="waktu">Waktu</label>
<input
type="time"
id="waktu"
name="waktu"
required
>
</div>
<!-- Color - color picker otomatis -->
<div class="form-group">
<label for="warna">Warna Favorit</label>
<input
type="color"
id="warna"
name="warna"
value="#3498db"
>
</div>
<button type="submit">Submit</button>
</form>Code language: HTML, XML (xml)Form Validation Lengkap dengan Styling
Berikut contoh form validation HTML5 lengkap dengan CSS untuk styling pesan error.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation HTML5 Lengkap</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.form-container {
background: white;
padding: 40px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 500px;
width: 100%;
}
h2 {
margin-bottom: 30px;
color: #333;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
font-weight: 500;
}
input, textarea, select {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: #667eea;
}
/* Valid state */
input:valid, textarea:valid, select:valid {
border-color: #27ae60;
}
/* Invalid state */
input:invalid, textarea:invalid, select:invalid {
border-color: #e74c3c;
}
/* Custom error message */
small {
display: block;
margin-top: 5px;
color: #666;
font-size: 14px;
}
button {
width: 100%;
padding: 14px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
button:hover {
transform: translateY(-2px);
}
button:active {
transform: translateY(0);
}
.required {
color: #e74c3c;
}
</style>
</head>
<body>
<div class="form-container">
<h2>Formulir Pendaftaran</h2>
<form action="/submit" method="post" novalidate>
<div class="form-group">
<label for="nama">
Nama Lengkap <span class="required">*</span>
</label>
<input
type="text"
id="nama"
name="nama"
minlength="3"
maxlength="50"
required
>
<small>Minimal 3 karakter</small>
</div>
<div class="form-group">
<label for="email">
Email <span class="required">*</span>
</label>
<input
type="email"
id="email"
name="email"
placeholder="nama@example.com"
required
>
</div>
<div class="form-group">
<label for="telepon">
Nomor Telepon <span class="required">*</span>
</label>
<input
type="tel"
id="telepon"
name="telepon"
pattern="[0-9]{10,13}"
placeholder="08123456789"
title="Nomor telepon harus 10-13 digit"
required
>
<small>Format: 08123456789</small>
</div>
<div class="form-group">
<label for="usia">
Usia <span class="required">*</span>
</label>
<input
type="number"
id="usia"
name="usia"
min="17"
max="100"
required
>
<small>Minimal 17 tahun</small>
</div>
<div class="form-group">
<label for="password">
Password <span class="required">*</span>
</label>
<input
type="password"
id="password"
name="password"
minlength="8"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Password minimal 8 karakter dengan huruf besar, kecil, dan angka"
required
>
<small>Minimal 8 karakter, harus ada huruf besar, kecil, dan angka</small>
</div>
<button type="submit">Daftar Sekarang</button>
</form>
</div>
</body>
</html>
Code language: HTML, XML (xml)Di bawah ini adalah hasil dari kode validasi HTML diatas yang menggunakan style dari CSS.
Custom Validation Messages dengan JavaScript
Meskipun HTML5 menyediakan validasi bawaan, Anda dapat customize pesan error dengan JavaScript.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Custom Validation Messages</title>
</head>
<body>
<form id="myForm">
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
required
>
<span class="error-message"></span>
</div>
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
minlength="8"
required
>
<span class="error-message"></span>
</div>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('myForm');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
// Custom validation messages
emailInput.addEventListener('invalid', function(e) {
e.preventDefault();
if (this.validity.valueMissing) {
this.setCustomValidity('Email wajib diisi');
} else if (this.validity.typeMismatch) {
this.setCustomValidity('Format email tidak valid');
}
});
emailInput.addEventListener('input', function() {
this.setCustomValidity('');
});
passwordInput.addEventListener('invalid', function(e) {
e.preventDefault();
if (this.validity.valueMissing) {
this.setCustomValidity('Password wajib diisi');
} else if (this.validity.tooShort) {
this.setCustomValidity('Password minimal 8 karakter');
}
});
passwordInput.addEventListener('input', function() {
this.setCustomValidity('');
});
// Form submit validation
form.addEventListener('submit', function(e) {
if (!form.checkValidity()) {
e.preventDefault();
alert('Mohon lengkapi form dengan benar');
}
});
</script>
</body>
</html>
Code language: HTML, XML (xml)Pattern Regex Umum untuk Validasi
Berikut adalah pattern regex yang sering digunakan untuk form validation HTML5:
<form>
<!-- Email -->
<input
type="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
>
<!-- Nomor Telepon Indonesia -->
<input
type="tel"
pattern="(^\+62|^62|^0)8[1-9][0-9]{6,9}$"
>
<!-- Username (alphanumeric, 3-16 karakter) -->
<input
type="text"
pattern="^[a-zA-Z0-9]{3,16}$"
>
<!-- Password kuat -->
<input
type="password"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
>
<!-- URL -->
<input
type="url"
pattern="https?://.+"
>
<!-- Kode Pos Indonesia (5 digit) -->
<input
type="text"
pattern="[0-9]{5}"
>
<!-- Nomor KTP (16 digit) -->
<input
type="text"
pattern="[0-9]{16}"
>
<!-- Plat Nomor Kendaraan -->
<input
type="text"
pattern="[A-Z]{1,2}\s?[0-9]{1,4}\s?[A-Z]{1,3}"
>
</form>
Code language: HTML, XML (xml)Best Practice Form Validation HTML5
1. Kombinasikan Client-Side dan Server-Side Validation
<!-- Client-side validation dengan HTML5 -->
<form action="/submit" method="post">
<input
type="email"
name="email"
required
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
>
<button type="submit">Submit</button>
</form>
<!-- Server-side validation tetap diperlukan untuk keamanan -->
Code language: HTML, XML (xml)2. Berikan Feedback yang Jelas
<div class="form-group">
<label for="password">Password</label>
<input
type="password"
id="password"
minlength="8"
title="Password minimal 8 karakter"
required
>
<small>
Password harus minimal 8 karakter dan mengandung huruf serta angka
</small>
</div>
Code language: JavaScript (javascript)3. Gunakan Atribut novalidate untuk Testing
<!-- Nonaktifkan validasi HTML5 untuk testing -->
<form action="/submit" method="post" novalidate>
<!-- Form fields -->
</form>
Code language: HTML, XML (xml)Kesimpulan
Form validation HTML5 adalah fitur powerful yang memudahkan developer membuat form interaktif tanpa JavaScript kompleks. Dengan menggunakan atribut seperti required, pattern, min, max, minlength, dan maxlength, Anda dapat membuat validasi form yang efektif dan user-friendly.
Ingat bahwa validasi client-side dengan HTML5 harus selalu dikombinasikan dengan validasi server-side untuk keamanan maksimal. Form validation HTML5 meningkatkan user experience dengan memberikan feedback langsung, mengurangi error, dan membuat proses pengisian form lebih smooth.
Mulai implementasikan form validation HTML5 dalam project Anda untuk menciptakan form yang lebih baik, aman, dan accessible untuk semua pengguna.
