Skip to main content
validasi dengan javascript gb1

Membuat Form Validasi dengan Javascript

Membuat validasi dengan javascript sangat mudah, dan jauh lebih fleksibel terlebih untuk mengganti elemen pada html. Hal ini biasa berguna jika dikombinasikan dengan framework CSS Bootstrap seperti contoh dibawah ini nanti. Disini saya akan memberikan contoh validasi dengan javascript yang nantinya akan mampu mengganti class dari css bootstrap. Sehingga tampilan saat form belum diisi dan ketika mengisi form / keyboard menekan tombol pada form input, seketika elemen html berubah.

BACA:

Dengan javascript kita dapat mengganti elemen -elemen pada html, seperti contoh elemen class , dimana nantinya saat dilakukan validasi kita bisa membuat form berubah warna menjadi merah dan fokus mouse langsung menuju pada form yang tidak lolos validasi. Seperti contoh gambar dibawah ini:

validasi dengan javascript gb2

Gambar.1 (Form saat kondisi normal)

 

validasi dengan javascript gb3

Gambar.2 (Form saat setelah di validasi dan ditemukan error)

Perhatikan pada Gambar.2 , pada form tersebut kotak input berubah warna menjadi merah. Hal ini terjadi karena elemen class yang semula adalah form input normal yakni class=”form-group” berubah menjadi class=”form-group has-error“. Fasilitas class ini dapat anda temukan di framework Bootstrap, sehingga jika anda menggunakan template admin bootstrap (dapat anda download gratis dengan search di google), anda dapat bermain-main dengan attribut seperti gambar diatas untuk menciptakan website yang dinamis.

Apa itu Bootstrap?

Karena di tutorial ini saya menggunakan Bootstrap, maka sedikit saya jelaskan tentang Bootstrap. Bootstrap adalah sebuah framework (kerangka kerja), yang dapat anda gunakan untuk menciptakan website dengan tampilan CSS yang menarik. Sehingga ketika anda mendesain sebuah website, anda tidak perlu repot-repot mengatur CSS untuk bagian-bagian seperti form, table, icon, layout dll. Contoh diatas hanya dengan mengganti class dari form-group menjadi form-group has-error , anda sudah bisa merubah kotak input form menjadi berwarna merah dengan gradient warna yang seharusnya rumit jika anda mengatur menggunakan css buatan sendiri.

Dengan Bootstrap, anda tidak perlu memikirkan lagi CSS dari website anda, hal ini lebih mudah dipahami untuk programmer pemula. Dan tentunya menghemat waktu anda, karena terkadang untuk mendesain website dengan CSS buatan sendiri, membutuhkan skill yang berkaitan dengan SENI. Termasuk saya, urusan desain web (CSS) saya serahkan ke Bootstrap dan template saya beli yang premium, akan tetapi urusan fungsi spt php, javascript , ajax, dll saya desain sendiri.

Form Validasi dengan Javascript

Untuk membuat form validasi, pertama silahkan anda copas kode berikut dan simpan dengan nama latihan.html

<!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>Validasi Form dengan Javascript AlexistDev.com</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script>
function validasiForm() {
var x = document.forms["formSaya"]["pesan"].value;
if (x == "") {
document.getElementById("p1").innerHTML = "Silahkan isi form input terlebih dahulu!";
document.getElementById("sb").setAttribute("class", "form-group has-error");
document.getElementById("sbf").focus();
return false;
}
}

function myPencet() {
document.getElementById("p1").innerHTML = "";
document.getElementById("sb").setAttribute("class", "form-group");
}
</script>
</head>

<body>
<form name="formSaya" onsubmit="return validasiForm()" action="" method="POST">
<div id="sb" class="form-group">
<div class="col-md-4">
<!--Pesan error disini -->
<p id="p1" style="color:red"></p>
<!--Pesan error disini -->
<input name="pesan" onkeypress="myPencet()" id="sbf" class="form-control" type="text" />
<button type="submit" />Submit</button>
</div>
</div>

</form>
</body>
</html>

Penjelasannya:

I.perhatikan kode berikut:


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

Kode tersebut diatas adalah untuk memanggil framework bootstrap, yang nantinya CSS bootstrap akan langsung berpengaruh di halaman html yang anda buat.

II. Kode selanjutnya adalah kode javascript berikut ini:

<script>
function validasiForm() {
var x = document.forms["formSaya"]["pesan"].value;
if (x == "") {
document.getElementById("p1").innerHTML = "Silahkan isi form input terlebih dahulu!";
document.getElementById("sb").setAttribute("class", "form-group has-error");
document.getElementById("sbf").focus();
return false;
}
}

function myPencet() {
document.getElementById("p1").innerHTML = "";
document.getElementById("sb").setAttribute("class", "form-group");
}
</script>

Ada 2 fungsi yakni:

  • fungsi validasiForm() , ini adalah fungsi yang digunakan untuk memvalidasi from anda saat tombol submit ditekan. Dimana dia akan membaca nama form [“formSaya”] pada bagian input dengan nama [“pesan”], yang kemudian nilai dari [“pesan”] tadi disimpan di varabel x. Dan jika variable x= kosong maka akan dilakukan 3 aksi yakni:
    • text dengan id=p1 yang semula kosong karena ditulis seperti ini <p id=”p1″ style=”color:red”></p>, maka akan berubah menjadi <p id=”p1″ style=”color:red”>Silahkan isi form input terlebih dahulu!</p>. Karena text “Silahkan isi form input terlebih dahulu!” akan ditambahkan ke bagian yang memiliki attribut “p1” dengan perintah javacript .innerHTML.
    • Selanjutnya adalah merubah class dari form input dengan attribut id=sb, dimana akan dirubah dari semula class=”form-group” menjadi form-group has-error. Pada bagian ini kotak input akan berubah menjadi warna merah.
    • Yang terakhir adalah mengarahkan mouse ke kotak input dengan kode javascript document.getElementById(“sbf”).focus();
  • fungsi myPencet(), ini adalah fungsi yang akan merubah attribut menjadi seperti form normal (sebelum ada error), saat anda memencet tombol pada keyboard atau saat anda mengisi kotak input. Sehingga jika anda mengisi kotak input hal ini berarti anda segera mengkoreksi form input, hasilnya form akan dikembalikan seperti semula. (pesan text “Silahkan isi form input terlebih dahulu!” dan warna merah pada kotak input akan dihilangkan). Fungsi ini dapat dilakukan karena anda memanggilnya dengan perintah onkeypress=”myPencet()” pada kotak input, seperti pada baris kode berikut:

<input name="pesan" onkeypress="myPencet()" id="sbf" class="form-control" type="text" /> 

 

III. Pada baris kode terakhir yang ingin saya jelaskan adalah , baris kode berikut:


<form name="formSaya" onsubmit="return validasiForm()" action="" method="POST">
<div id="sb" class="form-group">
<div class="col-md-4">
<!--Pesan error disini -->
<p id="p1" style="color:red"></p>
<!--Pesan error disini -->
<input name="pesan" onkeypress="myPencet()" id="sbf" class="form-control" type="text" />
<button type="submit" />Submit</button>
</div>
</div>

</form>

itu adalah baris kode html yang mengatur tampilan dan fungsi dari form yang anda buat. Untuk berkomunikasi dengan Javascript maka perhatikan attribut “id” disitu, dan untuk berkomunikasi dengan Bootstrap atau agar dapat menerapkan bootstrap di html anda , perhatikan attribut “class”.

 

Catatan Penulis:

Sangat mudah untuk melakukan validasi dengan javascript, anda dapat dengan leluasa membuat tampilan website anda jauh lebih interaktif dan dinamis. Jika ada yang ingin ditanyakan silahkan anda menuliskannya di kolom komentar, saya senang bisa berdiskusi.

Leave a Reply

Your email address will not be published. Required fields are marked *