Java Script untuk validasi form input | Dokumen Ary

1 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

Belajar adalah suatu investasi yang tak ternilai harganya

Untuk yang pertama kali, saya ingin berbagi bagaimana cara menggunakan Java Script untuk validasi form input, dengan berbagai jenis form. Validasi sendiri merupakan suatu cara untuk mendapat kan data yang sebenarnya dari User yang mengisikan data pada

form yang di sediakan, ok langsung saja di bahas yuuk

Mencegah Inputan Kosong

Misalnya ada sebuah form katakanlah username, kita ingin user mengisikan data (username nya) di sana dan tidak boleh kosong. Berikut Kode Form nya :
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Username: <input name="username" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
Pada form tersebut terdapat kode onsubmit=return validasi_input(this) , fungsinya adalah ketika tombol Submit di klik maka akan menuju ke function validasi_input pada JavaScript sebelum ke action=aksi.php, Berikut Kode JS nya, letakkan di atas Form ya..
<script type="text/javascript">
function validasi_input(form){
if (form.username.value == ""){
alert("Username masih kosong!");
form.username.focus();
return (false);
}
return (true);
}
</script>
Ketika from dengan nama username valuenya == (kosong) maka akan muncul alert Username masih kosong dan from username akan focus.

Membatasi Minimal Inputan

Gunakan form username diatas sebagai contoh, dan ganti JavaScriptnya menjadi berikut
<script type="text/javascript">
function validasi_input(form){
var mincar = 5;
if (form.username.value.length < mincar){
alert("Panjang Username Minimal 5 Karater!");
form.username.focus();
return (false);
}
return (true);
}
</script>
Jadi ketika isi dari form username panjangnya kurang dari 5, maka akan muncul alert Panjang Username Minimal 5 Karakter

Minimal Inputan dan hanya Huruf atau Angka

Gunakan form username saja sebagai contoh, dan ganti JavaScriptnya menjadi berikut
<script type="text/javascript">
function validasi_input(form){

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

2 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

pola_username=/^[a-zA-Z0-9\_\-]{6,100}$/;
if (!pola_username.test(form.username.value)){
alert ('Username minimal 6 karakter dan hanya boleh Huruf atau Angka!');
form.username.focus();
return false;
}
return (true);
}
</script>

Validasi Pilihan Radio Button

Sebelumnya sediakan dulu form Radio Button, disini saya mencontohkan pilihan untuk jenis kelamin, dimana user harus memilih laki-laki atau Perempuan. Berikut kode formnya
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Jenis Kelamin: <input type="radio" name="jk" value="L">Laki-Laki
<input type="radio" name="jk" value="P">Perempuan</p>
<p><input name="" type="submit" value="Submit"></p>
</form>
Pada From tersebut masih terdapat kode onsubmit=return validasi_input(this), Berikut Kode JS untuk fungsi tersebut
<script type="text/javascript">
function validasi_input(form){
function check_radio(radio)
{
// memeriksa apakah radio button sudah ada yang dipilih
for (i = 0; i < radio.length; i++)
{
if (radio[i].checked === true)
{
return radio[i].value;
}
}
return false;
}
var radio_val = check_radio(form.jk);
if (radio_val === false)
{
alert("Anda belum memilih Jenis Kelamin!");
return false;
}
return (true);

}
</script>

Pada Fungsi validasi_Input terdatapat juga fungsi cek_radio yang fungsinya untuk mengembalikan nilai True jika sudah ada yang terpilih dan False jika belum ada yang terpilih.

Validasi Untuk Combobox

Seperti biasa sediakan sebuah form berType Combobox, saya mencotohkan pada pilihan Agama, dimana user harus memilih salah satu dari agama, Berikut kode formnya
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Agama: <select name="agama">
<option value="pilih" selected>--Pilih--</option>
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="katolik">Katolik</option>

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

3 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
Yang harus di ingat adalah, pada combobox sediakan satu pilihan yang bukan datanya(bukan agama), gunanya sebagai acuan pada javascriptnya, kalo form yang saya buat terletak pada kode berikut <option value=pilih selected>Pilih</option>, dengan pilan
tersebut maka gampang saja, pasti anda sudah mengetahuinya.., bila masih belum dong, ini code JS nya
<script type="text/javascript">
function validasi_input(form){
if (form.agama.value =="pilih"){
alert("Anda belum memilih agama!");
return (false);
}
return (true);
}
</script>

Input Hanya Angka

Kasus yang cocok misalnya dalah input No Telp/Hp pada form, ok tanpa tunggu lama-lama langsung buat form nya, kalo males, ni kode form nya
<form method="post" action="aksi.php" onsubmit="return validasi_input(this)">
<p>Telp/Hp : <input name="telp" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
Kalo di lihat, nama form input tersebut adalah telp, jadi value dari form telp tersebut yang harus di cek satu per satu jika bukan angka langsung di tampilkan isi dari alertnya. Berikut kode javascriptnya
<script type="text/javascript">
function validasi_input(form){
if (form.telp.value != ""){
var x = (form.telp.value);
var status = true;
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9");
for (i=0; i<=x.length-1; i++)
{
if (x[i] in list) cek = true;
else cek = false;
status = status && cek;
}
if (status == false)
{
alert("Telp harus angka!");
form.telp.focus();
return false;
}
}
return (true);
}
</script>

Validasi Penulisan Email

Validasi penulisan email adalah yang paling sering di gunakan, karena alamat email memiliki karakter khusus yaitu @ dan .(titik), jika nama form inputnya dalah email, maka code javasciptnya adalah sebagai berikut :
<script type="text/javascript">
function validasi_input(form){

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

4 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!pola_email.test(form.email.value)){
alert ('Penulisan Email tidak benar');
form.email.focus();
return false;
}
return (true);

}
</script>

Ok pembahasan saya cukupkan sampai disini, semoga bisa bermanfaat

Rate this:
6 Votes
Share this:

Be the first to like this.

Related

Validasi Form Input Dengan PHP

Validasi

Repopulasi Form dengan Php

Membuat Watermark pada Form Input

macam-macam validasi form, membuat validasi, membuat validasi menggunakan javascript, validasi, validasi form, validasi javascript

Captcha Penjumlahan Angka

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

5 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

36 responses to Java Script untuk validasi form input

jouleea February 14, 2012 at 6:40 pm
terima kasih,sangat bermanfaat
1

Reply

Rate This

Almazari February 15, 2012 at 3:04 am

Sama-sama..
1

Reply

Rate This

Sugik February 24, 2012 at 4:50 am

keren Gan
2

Reply

Rate This

melinda March 21, 2012 at 3:04 pm

makasihh ^_^ ilmunya ..
semoga berkah amiiin
1

Reply

Rate This

ocimzone April 11, 2012 at 9:21 am

jos bos, i like it
0

Reply

Rate This

abidjoesoep May 25, 2012 at 4:31 am

amal baiknya bermanfaat buat orang lain hatur nuhun moga allah swt. menambah ilmunya
0

Reply

Rate This

Haerun May 27, 2012 at 7:52 am

waa! makasi banyak, masbroh.
sangat membantu
0

Reply

Rate This

Kusma August 11, 2012 at 5:54 am

membntu bnget Pak,,, thanks ya :))

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

6 dari 10

Rate This

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

Reply

roofi September 25, 2012 at 3:22 pm

aksi.php itu yang mna yaa
0

Reply

Rate This

Almazari September 26, 2012 at 12:18 pm

itu hanya ilustrasi mas,,,
0

Reply

Rate This

Yudia Rahman December 7, 2012 at 5:16 am

Mantap ilmunya massss. Thanks..
0

Reply

Rate This

Root December 21, 2012 at 2:28 am

makasih gaann.
share terus ilmunya
0

Reply

Rate This

dhonieSN January 17, 2013 at 2:22 am

makasih gaaann
terbantukan saya ..
0

Reply

Rate This

miftah March 16, 2013 at 5:32 pm

wahhhh keren banget bang..thankzz infonya
0

Reply

Rate This

mumun April 21, 2013 at 5:11 pm

file javascript nya apa mas isinya??
apa tidak usah di sertakan file JS.a bingung dengan kata type=text/javascript>
itu maksudnya apa??
0

Reply

Rate This

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

7 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

Tian Maringka May 23, 2013 at 6:00 am

mantap
0

Reply

Rate This

Martini June 18, 2013 at 4:39 am

sip makasih banget mas bro!
0

Reply

Rate This

susanto February 15, 2014 at 8:06 am

mas klo brdasarkan id,, bgaimana?
0

Reply

Rate This

Kharistiyan March 13, 2014 at 7:58 am

bermanfaat om, sekalian mau nanya om, klo pengecekan username yg ada di database itu gimana ya?
0

Reply

Rate This

Budi Jatmiko March 23, 2014 at 7:56 am

jika ingin membuat serial number misalnya angka sebanyak 16 digit yang di generate dari nama,email dan kota si pendaftar gimana gan.kemudian kita pengen membypass serial nymber tersebut bisa gan?
0

Reply

Rate This

iwan April 22, 2014 at 11:18 am

alhamdulillah,, trima kasih gan, mnta izin copas gan sklian q mau pljrin,,
0

Reply

Rate This

Tamara June 7, 2014 at 6:48 pm

You actually make it seem so easy with your presentation but I find this topic to be actually something that I think
I would never understand. It seems too complicated and extremely broad for
me. I am looking forward for your next post,
Ill try to get the hang of it!
0

Reply

Rate This

July 1, 2014 at 12:37 am

Hey! Quick question thats entirely off topic. Do you know how to
make your site mobile friendly? My blog looks weird whenn viewaing from my apple iphone.
Im trying too find a theme or plugin that might be aable to resolve this issue.
If yyou have any recommendations, please share. Appreciate

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

8 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

it!
0

Reply

Rate This

rudy July 1, 2014 at 2:24 am

Mau nanya kak,
Gimana buat validasi angka seperti di atas tapi
Jika angka pertama = 0 [nol]
Tidak bisa di input.
Ex: 0123
Jika angka kedua nol = 0 [nol]
Baru bisa.
Ex: 1023
0

Reply

Rate This

When the location is virtual life August 1, 2014 at 6:11 am

mau nanya dong kalau javascript yang di atas kan pake alert nah
kalau buat pertanyaan kaya ingin menghapus data pake apa ya ?
jadi ketika ditekan tombol hapus dia bertanya anda yakin ? yes no < seperti itu
trims
0

Reply

Rate This

October 14, 2014 at 3:59 am

I enjoy what you guys are up too. This type of clever work
and exposure! Keep up the great works guys Ive incorporated you guys to my personal blogroll.
0

Reply

Rate This

Soma Wahyu January 17, 2015 at 8:29 am

wohooo akhirnya ketemu thanks gan tentang share ilmunya
0

Reply

Rate This

pilopa February 11, 2015 at 4:54 am

kalo untuk tipe gambar dan size nya javascriptnya gimana gan
0

Reply

Rate This

spr February 26, 2015 at 9:02 pm

makasih gan, mudah dimengerti dan bermanfaat banget bagi pemula seperti saya..

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

9 dari 10

Rate This

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

Reply

Dotmp3 March 25, 2015 at 1:34 pm

makasih banyak min.
Saya coba pelajari dulu atu atu he he.
0

Reply

Rate This

zeneight May 8, 2015 at 12:47 pm

Untuk menggabungkan semua itu jadi satu script gimana caranya ya kk?
2

Reply

Rate This

mira June 3, 2015 at 5:34 am

kalo validasinya langsung di 2 text field gimana?
0

Reply

Rate This

mamas agus June 30, 2015 at 10:31 pm

mantab gan, sangat membantu ijin copy gan
terima kasih
0

Reply

Rate This

peterpang November 29, 2015 at 9:44 am

TERIMAKASIH, SANGAT BERMANFAAT, MANTAAAAAAP, IJIN COPAS YA.
0

Reply

Rate This

Rizal Setiawan March 3, 2016 at 6:34 am

gan mau nanya. kalo name nya array gimana?
0

Reply

Rate This

vmaxpembesaralami May 7, 2016 at 9:50 pm

gan gimana cara membut kolom verifikasi kode dan membut kodenya .
0

Reply

Rate This

Create a free website or blog at WordPress.com.

Top

21/09/2016 9:04

Java Script untuk validasi form input | Dokumen Ary

10 dari 10

https://dokumenary.wordpress.com/2011/11/01/java-script-untuk-validasi-form-input/

21/09/2016 9:04