Mandatory Javascript
Bagi sobat yang sedang mencari
tahu bagaimana caranya untuk membuat validasi sebuah kolom inputan (HTML). Mungkin kehadiran sobat pada artikel
ini bisa menjadi pilihan yang tepat. Namun, sebelum membahas isi dari tema
artikel ini, ada 1 hal yang perlu sobat ketahui terlebih dahulu, yaitu Mandatory Javascript. Pernah mendengarnya?
2 Kata tersebut adalah sebutan umum untuk codingan yang sejenis ini atau
codingan yang digunakan untuk membuat validasi (menggunakan javascript). Untuk
cara-caranya juga beragam, Mandatory
Javascript tidak hanya ada 1 jenis, beberapa diantaranya memiliki caranya
tersendiri. Namun pada artikel ini akan Dettline coba untuk menyajikan codingan
yang menurut Dettline mudah untuk dimengerti. Okey langsung saja kita bahas
codingannya.
Buatlah Format Form Seperti Dibawah Ini
Jadi, kolom yang dapat diisi
hanya pada kolom NIM dan NAMA saja. Sedangkan kolom AGAMA menggunakan menu
combobox. Tombol SIMPAN dan ULANGI menggunakan type “button” dan ”reset”.
Button nantinya akan digunakan untuk menjalankan Mandatory Javascript, lalu type
reset digunakan untuk menghapus semua karakter yang terisi pada kolom input (NIM
dan NAMA).
Untuk membuat tampilan seperti gambar diatas, lakukan koding seperti dibawah
ini. Buka notepad sobat lalu simpan dengan nama tutor.html
<html>
<head>
<title>Dettline</title>
</head>
<body>
<form name='biodata'
method='post' action='tutor.html'>
<pre>
Nim : <input type='number' name='nim'><p
id='val_nim'>* Hanya boleh di-isi dengan angka</p>
Nama : <input type='text' name='nama' ><p
id='val_nama'>* Masukkan Nama Mahasiswa</p>
Agama : <select name='agama'>
<option>Islam
<option>Hindu
<option>Budha
<option>Kristen
<option>Konghucu
</select><p>* Pilih Agama</p>
</pre>
<input type='button' onClick=' '
value='Simpan'>
<input type='reset' value='Ulangi'>
</form>
</body>
</html>
*Ket :
Perlu sobat ketahui,
berdasarkan kalimat diatas tadi. Dettline akan mencoba untuk memberikan
tutorial yang sederhana agar sobat dapat lebih mudah untuk memahaminya. Maka
dari itu codingan diatas menggunakan TAG <PRE>. Gunanya adalah mencetak
tampilan halaman apa adanya.
Maksudnya <pre> adalah bila sobat
memberi karter “space” atau “spasi”, baik “enter” maupun “tab”, semua itu akan
dibaca oleh mesin dan akan ditampilkan kedalam tampilan web. Sehingga sobat
dapat lebih mudah untuk membuat baris baru atau mengatur kesamaan posisi dari
symbol ( : ) agar menjadi seimbang dan sesuai dengan keinginan.
Input type=’number’ merupakan
sebuah atribut yang menandakan bahwa inputan harus berupa angka. (Kemungkinan
bila melaui Chrome, macam-macam karakter tidak dapat diketik, sedangkan lewat
Firefox karakter tetap bisa diinput namun saat klik tombol simpan, kolom akan
berubah menjadi merah. Yang menandakan bahwa inputan salah).
<p id=’val_nim’> dan <p
id=’val_nama’>
Digunakan untuk memberi notif
bila ada kesalahan inputan. <P> sendiri maksudnya adalah paragraf. Paragraf tersebut akan
di-replace ketika ada kesalahan input.
Setelah itu yang perlu
diketahui oleh sobat selanjutnya adalah atribut “NAME”. Kenapa ada atribut
tersebut? Atribut tersebut digunakan untuk pemberian nama identitas atau dapat
disebut juga sebagai variabel yang akan digunakan untuk keperluan javascript.
Lalu untuk apa perintah “onClick”
dan “Value”?
Gunanya onClick yaitu sebagai
perintah yang akan dijalankan ketika tombol tersebut di-klik.
Sedangkan Value fungsinya
untuk memberikan tulisan yang akan ditampilkan pada tombol.
Hampir lupa mengenai method
dan action.
Gunanya adalah untuk menentukan
parsing data dan juga untuk menentukan lokasi tujuan yang akan menerima inputan.
Untuk method/parsing data ada yang menggunakan GET (Menampilkan data didalam
link address) ataupun POST (Menyembunyikan data agar tidak tampil pada link
address).
Sebenarnya penggunaan method dan action tidak berpengaruh penting pada tutor kali ini, namun hal ini bisa menjadi gambaran untuk sobat nantinya, bahwa data (inputan) dapat dikirim melalui atribut method dan action.
Sebenarnya penggunaan method dan action tidak berpengaruh penting pada tutor kali ini, namun hal ini bisa menjadi gambaran untuk sobat nantinya, bahwa data (inputan) dapat dikirim melalui atribut method dan action.
Membuat Coding Javascript Mandatory
Buatlah koding seperti
berikut, simpan dengan nama javascript.js
function terimainput(){
var x=document.forms['biodata']['nim'].value;
var y=document.forms['biodata']['nama'].value;
var z=document.forms['biodata']['agama'].value;
if(x==null || x=="")
{
document.getElementById("val_nim").innerHTML="<font
color='red'><b>* Harap Isi Kolom NIM Dengan Benar</b></font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font
color='red'><b>* Harap Isi Kolom NAMA Dengan
Benar</b></font>";
} else {
document.getElementById("val_nama").innerHTML="<font
color='purple'>* Benar</font>";
}
} else {
document.getElementById("val_nim").innerHTML="<font
color='purple'>* Benar</font>";
if(y==null || y=="") {
document.getElementById("val_nama").innerHTML="<font
color='red'><b>* Harap Isi Kolom NAMA Dengan
Benar</b></font>";
} else {
//PROSES INPUT
}
}
}
*Ket:
Untuk lokasi penyimpanan,
sebaiknya disimpan di lokasi penyimpanan yang sama dengan tutor.html yang tadi telah sobat buat.
Penjelasannya.
Function terimainput() merupakan fungsi yang akan digunakan oleh tombol
Simpan yang terdapat pada file tutuor.html.
Saat tombol tersebut di-klik maka isi dari function terimainput() akan di-eksekusi atau dijalankan.
Lalu var x, var y, var z adalah nama variabel yang menerima isi dari
data nim (var x), nama (var y) dan agama (var z). Sedangkan penulisan “biodata”
adalah identifikasi dari TAG <form> yang ada di dalam file tutor.html. Maksudnya adalah variabel
x,y dan z akan mengambil data dari formulir biodata, dan masing-masing
diantaranya mempunyai peran penting untuk mengolah data tertentu (nim, nama,
agama). Mudah dipahami kan sobat?
Lalu if – else, if – else tersebut adalah opsi penentu. Logikanya adalah
if(x==null || x==””) --->
Jika variabel x sama dengan kosong atau variabel x tanpa sebuah isi.
if(y==null || y==””) --->
Jika variabel y sama dengan kosong atau variabel y tanpa sebuah isi.
Sedangkan else adalah pengecualian. Maksudnya yaitu bila keadaan
yang ditentukan (seperti contoh opsi penentu tersebut) tidak sesuai atau dapat
diartikan bahwa x memiliki nilai, atau y memiliki isi. Maka perintah else –lah yang akan dijalnkan.
Struktur javascript diatas
memiliki if – else di dalam if – else.
Oh iya, pada bagian //PROSES INPUT. Di bagian tersebut dapat digunakan untuk eksekusi lanjut bila data yang diinput semuanya bernilai true/benar. Bila sobat masih kurang paham mengenai alur tersebut dapat sobat sampaikan melalui kolom komentar, atau hubungi admin langsung.
Singkronisasi HTML dan Javascript
Bila masing-masing file telah
dibuat, sekarang adalah waktunya untuk menggabungkan kedua file tersebut.
Dengan cara sisipkan TAG
<script src='javascript.js'></script>
Dibawah TAG <title>Dettline</title>
Setelah itu isikan onClick
yang ada pada button simpan dengan isi ‘terimainput()’.
Maka akan tersusun seperti ini:
<input type='button' onClick='terimainput()' value='Simpan'>
Bila semua cara telah sobat
ikuti dengan lancar, maka sobat dapat melihat langsung prosesnya. Buka HTML
sobat, lalu silakan uji coba file tersebut. Hasilnya mungkin tidak akan jauh
berbeda seperti ini:
Demikian tutorial pertama pada kategori HTML versi Dettline. Terimakasih atas kunjungan sobat, semoga artikel ini dapat membantu. Bila ada pertanyaan yang ingin disampaikan, sobat dapat bertanya melalui komentar atau hubungi akun Dettline langsung.
5 komentar