membuat form validation bootstrap dan javascript abstrak...

Lisensi Dokumen:

Copyright © 2008-2017 ilmuti.org

Seluruh dokumen di ilmuti.org dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari ilmuti.org

Membuat Form Validation Bootstrap dan Javascript

Abstrak

Pada materi kali ini saya akan menjelaskan dan mengimplementasikan Validasi

form required dengan javascript dan bootstrap sebagai tampilannya. Untuk apa fungsi

validasi js sendiri ? mengapa menggunakan js ?

Pendahuluan

Javascript adalah bahasa pemograman Client Side, Apa itu Client Side ? Client

Side programming adalah pemograman dengan hanya memanfaatkan browser dan

menjalakan suatu aplikasi tanpa me-reload page suatu web. Semua dijalankan dalam 1

sentuhan browser sebagai media.

Pembahasan

Kali ini saya akan mengimplementasikan form validasi dengan js. Fungsi validasi

sendiri untuk menahan suatu kesalaha yang akan dibuat user. Disini kita akan menahan

kesalah pengimputan form yang seharusnya diisi oleh user. Jika suatu form memilik field

atau inputan yang harus di input namun applikasi tersebut tidak membuat validasi,

aplikasi tersebut bisa jadi error, ataupun data yang dibutuhkan tidak masuk.

Pertama kita akan membuat file HTML dengan nama index.html. Kemudian

masukan code berikut. Semua code tercantum dalam 1 file. Kemudian saya akan

menjelaskan tiap code yang penting. Tampilan formnya

http://www.ilmuti.org/



Lisensi Dokumen:



<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-

BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

Code diatas bisa kalian copy. Code tersebut berfungsi untuk menggunakan css

bootstrap framework secara online.




Lisensi Dokumen:



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>QUIZ</title>

<link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-

BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>

Bagian code pertama yaitu bagian atas code html seperti biasanya. Disini bagian

form pertamanya.

<body>

<div class="container">

<div class="row">

<h3>Buat Akun

<small>

<span></span> Baru </span>

</small>

</h3>

</div>

<div class="row">

<form action="" class="form-horizontal" onsubmit="return submit_form()">




Lisensi Dokumen:



<div>

<h3 class="page-header">Login</h3>

<br>

<div id="login"></div>

<div class="form-group">

<div class="col-md-3">

<label for="">

<i class="text text-danger">*</i> Username</label>

</div>


<input type="text" id="username" placeholder="Username" class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Password</label>

</div>


<input type="password" id="password" placeholder="Password" class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Ulangi Password</label>

</div>




Lisensi Dokumen:




<input type="password" id="repassword" placeholder="Password" class="form-control">

</div>

</div>

</div>



Pada code onsubmit="return submit_form()" berfungsi untuk memanggil fungsi javascript

yang ada dibagian bawah. Kemudiaan tiap Input type diberikan id, untuk apa fungsi id ?

id pada htm disebut attribut, burfungsi untuk memberikan suatu identitas agar tidak terjadi

kesamaan saat diberikan perintah dengan id tersebut. Id biasa nya tidak boleh sama

penamaannya karena akan berpengaruh pada javascript saat memberikan perintah.

Javascript akan kebingungan antara id dengan penamaan yang sama.

Selanjutnya bagian kedua

<div>

<h3 class="page-header">Identitas</h3>

<br>

<div id="identitas"></div>



<label for="">

<i class="text text-danger">*</i> Nama Sesuai Identitas</label>

</div>


<input type="text" id="namaid" placeholder="Nama" class="form-control">

</div>

</div>

Lisensi Dokumen:





<label for="">

<i class="text text-danger">*</i> Nama Sesuai Ijazah</label>

</div>


<input type="text" id="namaij" placeholder="Nama" class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i>Jenis Identitas</label>

</div>


<select class="form-control" name="" id="jenisijazah">

<option value="0">- pilih -</option>

<option value="1">KTP</option>

<option value="2">NPWP</option>

</select>

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Nomor Identitas</label>

</div>




Lisensi Dokumen:




<input type="number" id="nomorid" placeholder="e.g 123.." class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Kewarganegaraan</label>

</div>


<select class="form-control" name="" id="kwn">


<option value="1">INDONESIA</option>

<option value="2">ASING</option>

</select>

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Jenis Kelamin</label>

</div>


<input type="radio" id="jk" name="jk" value="p"> Pria

<input type="radio" id="jk" name="jk" value="w"> Wanita

</div>

</div>




Lisensi Dokumen:





<label for="">

<i class="text text-danger">*</i> Tempat Lahir</label>

</div>


<input type="text" id="tempatlahir" placeholder="Kota" class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Tanggal Lahir</label>

</div>


<input type="text" id="tanggallahir" placeholder="dd/mm/yyyy" class="form-control">

</div>

</div>

</div>


Dan kita lanjutkan ke bagian ketiga

<div>

<h3 class="page-header">Kontak</h3>

<br>

<div id="kontak"></div>





Lisensi Dokumen:




<label for="">

<i class="text text-danger">*</i> Alamat</label>

</div>


<textarea id="alamat" class="form-control" placeholder="Alamat"></textarea>

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Negara</label>

</div>


<select class="form-control" name="" id="negara">


<option value="1">Indonesia</option>

<option value="2">Austria</option>

</select>

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Provinsi</label>

</div>





Lisensi Dokumen:



<select class="form-control" name="" id="provinsi">


<option value="1">Banten</option>

<option value="2">Jawa Barat</option>

</select>

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Kabupaten</label>

</div>


<select class="form-control" name="" id="kab">


<option value="1">kab. Tangerang</option>

<option value="2">Kota Tangerang</option>

</select>

</div>

</div>



<label for="">

No. Telp</label>

</div>


<input type="text" id="notelp" class="form-control">




Lisensi Dokumen:



</div>

</div>



<label for="">

<i class="text text-danger">*</i> No Hp</label>

</div>


<input type="text" id="nohp" placeholder="no hp.." class="form-control">

</div>

</div>



<label for="">

<i class="text text-danger">*</i> Email</label>

</div>


<input type="text" id="email" class="form-control">

</div>

</div>

</div>







Lisensi Dokumen:



<button type="reset" class="btn btn-default">Reset</button>

<button type="submit" class="btn btn-primary">Save</button>

</div>

</div>

</form>

</div>

</div>

Diatas hanya berisi form input seperti dibagian pertama. Jadi tidak perlu penjelasan lagi.

Kemudian sisipkan code javascript.

Code Diawali dengan <Script> dan di tutup dengan </Script> , kalian harus mensisipkan

didalamnnya.

function submit_form() {

var username = document.getElementById('username');

var password = document.getElementById('password');

var repassword = document.getElementById('repassword');

var namaid = document.getElementById('namaid');

var namaij = document.getElementById('namaij');

var jenisijazah = document.getElementById('jenisijazah');

var kwn = document.getElementById('kwn');

var jk = document.getElementById('jk');

var tempatlahir = document.getElementById('tempatlahir');




Lisensi Dokumen:



var tanggallahir = document.getElementById('tanggallahir');

var alamat = document.getElementById('alamat');

var provinsi = document.getElementById('provinsi');

var kab = document.getElementById('kab');

var nohp = document.getElementById('nohp');

var email = document.getElementById('email');

var login = "login";

var identitas = "identitas";

var kontak = "kontak";

if (username.value == '') {

username.focus();

alert_message(login, ' Username Harus diisi ', false);

return false;

} else if (username.value.length < 5) {

username.focus();

alert_message(login, ' Username Harus lebih dari 5 karakter', false);

return false;

} else {

alert_message(login, '', true)

}

if (password.value == '') {

password.focus();

alert_message(login, ' Password Harus diisi ', false);




Lisensi Dokumen:



return false;

} else if (password.value.length < 12) {

password.focus();

alert_message(login, ' Password Harus lebih dari 12 karakter', false);

return false;

} else {


}

if (repassword.value == '') {

repassword.focus();

alert_message(login, 'Re-Type Password Harus diisi ', false);

return false;

} else if (repassword.value.length < 12) {

repassword.focus();

alert_message(login, ' Re-Type Harus lebih dari 12 karakter', false);

return false;

} else {


}

if (namaid.value == '') {

namaid.focus();

alert_message(identitas, ' nama identitas Harus diisi ', false);

return false;

} else {

alert_message(identitas, '', true)




Lisensi Dokumen:



}

if (namaij.value == '') {

namaij.focus();

alert_message(identitas, ' nama ijazah Harus diisi ', false);

return false;

} else {


}

if (jenisijazah.value == 0) {

jenisijazah.focus();

alert_message(identitas, ' jenis identitas Harus diisi ', false);

return false;

} else {


}

if (nomorid.value == '') {

nomorid.focus();

alert_message(identitas, ' nomor identitas Harus diisi ', false);

return false;

} else {


}

if (kwn.value == 0) {




Lisensi Dokumen:



kwn.focus();

alert_message(identitas, ' kewarganegaraan Harus diisi ', false);

return false;

} else {


}

if (jk.checked == false) {

jk.focus();

alert_message(identitas, ' jenis kelamin Harus diisi ', false);

return false;

} else {


}

if (tempatlahir.value == '') {

tempatlahir.focus();

alert_message(identitas, ' Tempat Lahir Harus diisi ', false);

return false;

} else {


}

if (tanggallahir.value == '') {

tanggallahir.focus();

alert_message(identitas, ' Tanggal Lahir Harus diisi ', false);

return false;




Lisensi Dokumen:



} else {


}

// TODO: SECTION KONTAK

if (alamat.value == '') {

alamat.focus();

alert_message(kontak, ' alamat Harus diisi ', false);

return false;

} else {

alert_message(kontak, '', true)

}

if (negara.value == 0) {

negara.focus();

alert_message(kontak, ' negara Harus diisi ', false);

return false;

} else {


}

if (provinsi.value == 0) {

provinsi.focus();

alert_message(kontak, ' provinsi Harus diisi ', false);

return false;

} else {





Lisensi Dokumen:



}

if (kab.value == 0) {

kab.focus();

alert_message(kontak, ' kabupaten Harus diisi ', false);

return false;

} else {


}

if (nohp.value == '') {

nohp.focus();

alert_message(kontak, ' no hp identitas Harus diisi ', false);

return false;

} else {


}

if (email.value == 0) {

email.focus();

alert_message(kontak, ' email Harus diisi ', false);

return false;

} else {


}

alert("Sukses")




Lisensi Dokumen:



return false;

}

Kalian bisa copy kan code diatas. Disini saya akan menjelaskan tiap bagiannya.


var password = document.getElementById('password');

var repassword = document.getElementById('repassword');

Pada bagian ini berfungsi sebagai variable JS sekaligus inisialisasi dari id input yang

diatas.

Contoh

<input type="text" id="username" placeholder="Username" class="form-control">


Bisa dilihat id dari input adalah username, kemudia document.getElementById adalah

fungsi javascript untuk menyembuatkan id dari tag html tertentu.

f (username.value == '') {

username.focus();

alert_message(login, ' Username Harus diisi ', false);

return false;

} else if (username.value.length < 5) {

username.focus();

alert_message(login, ' Username Harus lebih dari 5 karakter', false);

return false;

} else {





Lisensi Dokumen:



}

Disini adalah bagian validasinya. Dari variable usernam tersebut ada bagian .value, ini

berfungsi untuk mengambil isi dari texbotx tersbut kemudia == ‘’ , berfungsi untuk

memeriksa apakah isi nya kosong atau tidak. Jika ya maka akan menjalan kan alert untuk

pemberitahuan.

Untuk alert atau notifikasi nya sisipkan code

function alert_message(id, message, issuccess) {

document.getElementById(id).innerHTML = "";

if (!issuccess) {

document.getElementById(id).innerHTML += '<div id="alert" class="fixed-top alert alert-danger">'

+

'<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' +

'<strong>Peringatan!</strong>' +

'<span>' + message + '</span>' +

'</div>';

document.getElementById(id).scrollIntoView();

} else {

document.getElementById(id).innerHTML = "";

}

}

Ini adalah alert custom tidak mengguakan alert defaut javascript. Melainkan

mengeluarkan alert denga css bootstrap agar lebih menarik. Jika sudah kalian bisa

membukanya dengan mng-klik file.html yang kalian buat, dan akan terbuka dibrowser.

Jika dijalankan maka akan terlihat seperti dibawah. Akan muncul notifikasi jika belum




Lisensi Dokumen:



disi. Dan istimewanya client side ini adalah tidak adanya refresh page ketika dijalan kan

submit

Penutup

Pada tahap implementasi form validasi dengan javascript. Form ini dapat

digunakan atau sudah sering digunakan oleh programmer pro dengan client side validasi,

tentunya cara ini adalah cara yang efektif dan tidak menguras waktu saat user

mengguakan formnya.




Lisensi Dokumen:



Referensi

Pengalaman Sendiri

Biografi

Fajar Septiawan, sedang fokus bekerja di bidang teknologi informasi, dan sedang

menjalakan kuliah S1 di STMIK Raharja TI fokus software Engginering. Senang

mengekplorasi dunia teklonologi khususnya Pemograman. Mencintai dunia Startup dan

ingin ikut serta menjalankannya dimasa depan. Anda bisa melihat atau menghubungi saya

di profil Linkedin https://www.linkedin.com/in/fajar-septiawan-84419110a/ .




https://www.linkedin.com/in/fajar-septiawan-84419110a/

membuat form validation bootstrap dan javascript abstrak...

Documents