Akhirnya jumpa lagi kawan dengan saya, yang telah lama vacum dari dunia pemrograman dan kali ini saya kembali lagi membawa pembelajaran hasil pertapaan saya tentang "Validasi Form Menggunakan Javascript". Mengingat tutorial ini adalah kelanjutan dari artikel kemarin yang bertajuk sama alias Membuat Form Validasi Warning Javascript Sederhana Bagian 1. Maka saya sarankan jika anda belum membacanya, silakan anda buka link tersebut untuk memantapkan ilmu anda dalam menghadapi kode-kode pemrograman.
Oppss, jangan lupa siapkan alat tempur anda. Laptop beserta catu dayanya entah itu bateray atau charger yang penting laptopnya bisa nyala gitu ajah. Tidak ketinggalan juga siapkan secangkir kopi hangat berserta filternya sekalian untuk teman strees nantinya.
Okey,
Setelah semua siap, saatnya kita tempur dan beraksi.
Dalam membuat sebuah validasi khususnya "Form Validasi" yang paling dipentingkan adalah
1. Form inputan yang akan berguna untuk input value
2. Script JavaScript yang berfungsi untuk mem-validasi input dari form
Bagian 1
Kita coding dulu saja Form inputan yang akan kita gunakan. Sebagai contoh saya menggunakan Source Code sebagai berikut.
<body>
<h1>Form Validasi Login</h1>
<table>
<form name="data" action="kirim.php" method="get" onsubmit="return submitForm()" onreset="resetForm()">
<tr>
<td>UserNama</td>
<td>:</td>
<td><input type="text" name="inputUser" id="username" maxlength="12" onfocus="userFocus(this)" onblur="userBlur(this)" />
<span id="userWarning"></span></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" maxlength="32" name="inputPassword" id="password" onfocus="passwordFocus(this)" onblur="passwordBlur(this)" />
<span id="passwordWarning"></span></td>
</tr>
<tr>
<td><input type="submit" name="kirimData" id="kirim" value="Kirim" /></td>
<td><input type="reset" name="resetData" id="reset" value="Reset" /></td>
</tr>
</form>
</table>
<p id="warningUsername"></p>
<p id="warningPassword"></p>
</body>
<h1>Form Validasi Login</h1>
<table>
<form name="data" action="kirim.php" method="get" onsubmit="return submitForm()" onreset="resetForm()">
<tr>
<td>UserNama</td>
<td>:</td>
<td><input type="text" name="inputUser" id="username" maxlength="12" onfocus="userFocus(this)" onblur="userBlur(this)" />
<span id="userWarning"></span></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" maxlength="32" name="inputPassword" id="password" onfocus="passwordFocus(this)" onblur="passwordBlur(this)" />
<span id="passwordWarning"></span></td>
</tr>
<tr>
<td><input type="submit" name="kirimData" id="kirim" value="Kirim" /></td>
<td><input type="reset" name="resetData" id="reset" value="Reset" /></td>
</tr>
</form>
</table>
<p id="warningUsername"></p>
<p id="warningPassword"></p>
</body>
Bagian 2
Setelah Form input jadi, maka kita bisa melanjutkan coding pada bagian Script yang akan kita gunakan untuk mevalidasi dari form tersebut.
<script>
// ganti warna background input user saat form input dalam keadaan focus
function userFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('userWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Username terdiri dari 8-12 karakter';
}
// kembalikan warna background seperti semula
function userBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('userWarning').innerHTML = '';
}
// ganti warna background input password saat dalam keadaan focus
function passwordFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('passwordWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Password minimal 8 - 32 karakter';
}
// kembalikan warna backgroud seperti semula
function passwordBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('passwordWarning').innerHTML = '';
}
// Logika ketika Form di submit
function submitForm(){
// cek validasi UserName
var userValid = /^[a-zA-Z0-9]{3,12}\.?\_?[a-zA-Z0-9]{4,12}[a-zA-Z0-9]$/;
var data = document.getElementById('username').value;
var cekUsername = data.match(userValid);
// Cek validasi Password
var passwordValid = /[a-zA-Z0-9]{6,32}/;
var data1 = document.getElementById('password').value;
var cekPassword = data1.match(passwordValid);
// Tentukan kondisi true atau false ketika input submit
if(data!=cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data==cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data!=cekUsername && data1==cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '';
return false;
}
}
// reset Form
function resetForm(){
alert('Form telah di Reset');
}
</script>
// ganti warna background input user saat form input dalam keadaan focus
function userFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('userWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Username terdiri dari 8-12 karakter';
}
// kembalikan warna background seperti semula
function userBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('userWarning').innerHTML = '';
}
// ganti warna background input password saat dalam keadaan focus
function passwordFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('passwordWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Password minimal 8 - 32 karakter';
}
// kembalikan warna backgroud seperti semula
function passwordBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('passwordWarning').innerHTML = '';
}
// Logika ketika Form di submit
function submitForm(){
// cek validasi UserName
var userValid = /^[a-zA-Z0-9]{3,12}\.?\_?[a-zA-Z0-9]{4,12}[a-zA-Z0-9]$/;
var data = document.getElementById('username').value;
var cekUsername = data.match(userValid);
// Cek validasi Password
var passwordValid = /[a-zA-Z0-9]{6,32}/;
var data1 = document.getElementById('password').value;
var cekPassword = data1.match(passwordValid);
// Tentukan kondisi true atau false ketika input submit
if(data!=cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data==cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data!=cekUsername && data1==cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '';
return false;
}
}
// reset Form
function resetForm(){
alert('Form telah di Reset');
}
</script>
Dan yang terakhir, gabung menjadi satu kumpulan dari source code tersebut. Lalu jalankan dengan browser kesukaaan anda.
Souce Lengkap :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
// ganti warna background input user saat form input dalam keadaan focus
function userFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('userWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Username terdiri dari 8-12 karakter';
}
// kembalikan warna background seperti semula
function userBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('userWarning').innerHTML = '';
}
// ganti warna background input password saat dalam keadaan focus
function passwordFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('passwordWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Password minimal 8 - 32 karakter';
}
// kembalikan warna backgroud seperti semula
function passwordBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('passwordWarning').innerHTML = '';
}
// Logika ketika Form di submit
function submitForm(){
// cek validasi UserName
var userValid = /^[a-zA-Z0-9]{3,12}\.?\_?[a-zA-Z0-9]{4,12}[a-zA-Z0-9]$/;
var data = document.getElementById('username').value;
var cekUsername = data.match(userValid);
// Cek validasi Password
var passwordValid = /[a-zA-Z0-9]{6,32}/;
var data1 = document.getElementById('password').value;
var cekPassword = data1.match(passwordValid);
// Tentukan kondisi true atau false ketika input submit
if(data!=cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data==cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data!=cekUsername && data1==cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '';
return false;
}
}
// reset Form
function resetForm(){
alert('Form telah di Reset');
}
</script>
</head>
<body>
<h1>Form Validasi Login</h1>
<table>
<form name="data" action="kirim.php" method="get" onsubmit="return submitForm()" onreset="resetForm()">
<tr>
<td>UserNama</td>
<td>:</td>
<td><input type="text" name="inputUser" id="username" maxlength="12" onfocus="userFocus(this)" onblur="userBlur(this)" />
<span id="userWarning"></span></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" maxlength="32" name="inputPassword" id="password" onfocus="passwordFocus(this)" onblur="passwordBlur(this)" />
<span id="passwordWarning"></span></td>
</tr>
<tr>
<td><input type="submit" name="kirimData" id="kirim" value="Kirim" /></td>
<td><input type="reset" name="resetData" id="reset" value="Reset" /></td>
</tr>
</form>
</table>
<p id="warningUsername"></p>
<p id="warningPassword"></p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
// ganti warna background input user saat form input dalam keadaan focus
function userFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('userWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Username terdiri dari 8-12 karakter';
}
// kembalikan warna background seperti semula
function userBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('userWarning').innerHTML = '';
}
// ganti warna background input password saat dalam keadaan focus
function passwordFocus(bg){
bg.style.backgroundColor = '#efefef';
var warning = document.getElementById('passwordWarning');
warning.style.color = '#f00';
warning.style.fontSize = '12px';
warning.innerHTML = 'Password minimal 8 - 32 karakter';
}
// kembalikan warna backgroud seperti semula
function passwordBlur(bg){
bg.style.backgroundColor = '#fff';
document.getElementById('passwordWarning').innerHTML = '';
}
// Logika ketika Form di submit
function submitForm(){
// cek validasi UserName
var userValid = /^[a-zA-Z0-9]{3,12}\.?\_?[a-zA-Z0-9]{4,12}[a-zA-Z0-9]$/;
var data = document.getElementById('username').value;
var cekUsername = data.match(userValid);
// Cek validasi Password
var passwordValid = /[a-zA-Z0-9]{6,32}/;
var data1 = document.getElementById('password').value;
var cekPassword = data1.match(passwordValid);
// Tentukan kondisi true atau false ketika input submit
if(data!=cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data==cekUsername && data1!=cekPassword){
document.getElementById('warningUsername').innerHTML = '';
document.getElementById('warningPassword').innerHTML = '<li>Password Salah</li>';
return false;
}
else if(data!=cekUsername && data1==cekPassword){
document.getElementById('warningUsername').innerHTML = '<li>Username Salah</li>';
document.getElementById('warningPassword').innerHTML = '';
return false;
}
}
// reset Form
function resetForm(){
alert('Form telah di Reset');
}
</script>
</head>
<body>
<h1>Form Validasi Login</h1>
<table>
<form name="data" action="kirim.php" method="get" onsubmit="return submitForm()" onreset="resetForm()">
<tr>
<td>UserNama</td>
<td>:</td>
<td><input type="text" name="inputUser" id="username" maxlength="12" onfocus="userFocus(this)" onblur="userBlur(this)" />
<span id="userWarning"></span></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input type="password" maxlength="32" name="inputPassword" id="password" onfocus="passwordFocus(this)" onblur="passwordBlur(this)" />
<span id="passwordWarning"></span></td>
</tr>
<tr>
<td><input type="submit" name="kirimData" id="kirim" value="Kirim" /></td>
<td><input type="reset" name="resetData" id="reset" value="Reset" /></td>
</tr>
</form>
</table>
<p id="warningUsername"></p>
<p id="warningPassword"></p>
</body>
</html>
Gimana, saya harap kalian mudah memahaminya.Jika ada hal yang belom jelas, mungkin bisa anda tanyakan melalui kolom komentar atau direct message via FB saya.
Thank's ^_^
tinggal dicopas aja ya ini min ?
BalasHapussolder uap
gak ada demonya ya
BalasHapusTerima kasih kak atas blog nya,blog nya bagus kak dan membantu sya memahami cara membuat validasi pada form html menggunakan javascript.sya juga mau bertaya kak codingan htlm dan javascript harus dalam satu codingan apa bisa di pisah kak?dan terus berkarya kak. Perkenalkan nama saya Andrian Antonius Nim:1922500215 dan web kampus saya : https://www.atmaluhur.ac.id/
BalasHapusTerimakasih kak. Artikel yang kakak buat sangat bagus. Semangat terus ya kak untuk membuat artikelnya.
BalasHapusDan Saya mau bertanya, validasinya bisa dilakukan dengan semua Hal yang di input ya?.
Perkenalkan Nim saya 1922500053, Nama Muhammad Intan Arfies, Kelompok SI2K, link kampus saya https://www.atmaluhur.ac.id/
Salam kenal ya kak.
Mudah dipahami dan caranya mudah sekali kak. Semoga bwrmanfaat juga buat yg lainnya. Terima kasih
BalasHapusNama: yulinda sari
Nin: 1922500197
Dan link web kampus saya
https://www.atmaluhur.ac.id/
Terima kasih kak, atas ilmu yang kakak share semoga dapat bermanfaat untuk saya yang baru mempelajari membuat validasi form html dengan JavaScript. Penjelasan yang kakak berikan sangat bagus, dan mudah di mengerti.
BalasHapusPerkenalkan
nama saya :Reza Anggraini,
Nim : 1922500196,
kelompok : SI2K
Dan jangan lupa kunjungi website kampus saya https://www.atmaluhur.ac.id/