Membuat Form Validasi Warning Javascript Sederhana Bagian 1

Selamat Siang,

Terus belajar, dan semangat menatap masa depan.
Okey,,, kali ini saya akan membagikan sedikit source code tentang validasi form. Seperti di ketahui peringatan warning yang muncul saat kita memasukan sebuah input ke dalam form. Kali ini kita akan membahasannya.

Seperti biasa Langsung source Code :
Ini merupan bagian dari head dan doctype dari suatu page
<!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>Form Validasi</title>

Saatnya kita membuat script JavaScript yang akan kita gunakan ke dalam form

<script>
function bg_input(x){
    x.style.backgroundColor = '#eee';
}

function nama_warning(){
    var x = document.getElementById('nama_w');
    x.style.color = '#00f';
    x.style.fontSize = '12px';
    x.style.paddingLeft = '5px';
    x.innerHTML = 'Nama tidak lebih dari 20 karakter';
}

function nama_warning1(){
    var x = document.getElementById('nama_w');
    x.innerHTML = '';
   
    document.getElementById('nama').style.backgroundColor = '#fff';
}

function alamat_warning(){
    var x = document.getElementById('alamat_w');
    x.style.color = '#00f';
    x.style.fontSize = '12px';
    x.style.paddingLeft = '5px';
    x.innerHTML = 'Silakan masukan Alamat anda dengan benar dan lengkap';
}

function alamat_warning1(){
    var x = document.getElementById('alamat_w');
    x.innerHTML = '';
   
    document.getElementById('alamat').style.backgroundColor = '#fff';
}

function submit_form(){
    alert('Data anda akan di proese');
}

function reset_form(){
    alert('Data reset');
}
</script>

Saatnya kita masuk elemen html yang berisi kode-kode dari Form dan inputan yang akan kita gunakan dan tampilkan

</head>

<body>
<h1>Form Validasi</h1>
<table>
<form name="data" action="" method="get" onsubmit="submit_form()" onreset="reset_form()">
<tr>
<td>Nama</td>
<td>:</td>
<td><input type="text" name="nama1" id="nama" maxlength="20" onfocus="bg_input(this), nama_warning()" onblur="nama_warning1()"  /><span id="nama_w" style=""></span></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input type="text" name="alamat1" id="alamat" onfocus="bg_input(this),alamat_warning()" onblur="alamat_warning1()" /><span id="alamat_w" style=""></span></td>
</tr>
<tr>
<td><input type="submit" name="kirim1" id="kirim" value="Kirim" /></td>
<td><input type="reset" name="reset1" id="reset" value="Reset" /></td>
</tr>
</form>
</table>

</body>
</html>

Jadikan satu file pecahan-pecahan kode diatas dan jalankan pada browser anda.
Screenshot  :

Dan itulah tadi sedikit pengetahuan yang mungkin dan berguna buat anda yang masih dalam pembelajaran dasar seperti saya ini.
Thank's ^_^

Tidak ada komentar :

Posting Komentar

tombol share icon
tombol kembali ke atas
Wait . . . !!!
tampilan ads aktif