Mengawali artikel pada kategori ini, pada artikel kali ini saya akan berbagi kumpulan javascript untuk keperluan form validasi, tentunya artikel kali ini saya tujukan untuk pemula ya, bagi yang sudah pro minggir dulu hehe. Apa fungsi form validasi?, fungsinya sangat banyak diantaranya yakni sebagai pemeriksa input kosong, memeriksa email, memeriksa jumlah value, angka dll. Tentunya form validasi ini sangatlah penting untuk menjaga pengiriman data agar sesuai. Baiklah kita lanjut ke topik

1.Javacsript pemeriksa input kosong
Yang pertama ini adalah yg paling sering diperlukan untuk validasi form, agar si user nakal mengisi input dengan sempurna, begini basic javascriptnya :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<pre>
<html>

<input type="text" id="username" name="username" onchange="cek_input();" placeholder="input"> <!-- Input id = username -->

<script>
function cek_input(){
    isi = document.getElementById('username').value; //mengambil value dari input id username
    if(isi == null || isi === ''){ //cek value jika kosong
        alert('input kosong'); //peringatan karena value kosong
    } else{
        //input berisi
    }
}
</script>

</html>
</pre>

cek-input-kosong-Javascript-Keperluan-validasi-form-lamongandev.com

2.Javascript untuk periksa jumlah input minimal
Yang kedua ini biasanya diperlukan saat validasi input password, agar karakter tidak kurang dari 6 atau 8 atau lebih, begini basic javascriptnya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>

<input type="text" id="min5" name="min5" onchange="cek_input();" placeholder="input"> <!-- Input id = min5 -->

<script>
function cek_input(){
    isi = document.getElementById('min5').value; //mengambil value dari input id min5
    if(isi.length<5){ //cek dan hitung jika karakter kurang dari "<" lima karakter
        alert('input kurang dari 5 karakter'); //peringatan karena value kurang dari 5
    } else{
        //input benar
    }
}
</script>

</html>

3.Javascript untuk periksa jumlah input jika melebihi batas maximal
Seringkali si user nakal mengisi input dengan data ngawur alias melebihi batas, maka berikut adalah basic javascript untuk membatasi jumlah value input..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>

<input type="text" id="max7" name="max7" onchange="cek_input();" placeholder="input"> <!-- Input id = max7 -->

<script>
function cek_input(){
    isi = document.getElementById('max7').value; //mengambil value dari input id max7
    if(isi.length>7){ //cek dan hitung jika karakter lebih dari 7 karakter
        alert('Input melebihi batas!, maksimal 7 karakter'); //peringatan karena value input melebihi batas
    } else{
        //input benar
    }
}
</script>

</html>

cek-jika-input-melebihi-batas-Javascript-Keperluan-validasi-form-lamongandev.com

4.Javascript untuk mengizinkan hanya angka pada input
Yang ke empat ini juga sering terjadi pada input form, input nomor telepon eh si user nakal malah mengisinya dengan huruf. Maka begini script validasinya agar input hanya tetap bisa di isi angka.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>

<input type="text" name="tahun" onkeypress="return cek_input(event)" placeholder="2020">

<script>
function cek_input(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        alert("input hanya boleh di isi angka!");
        return false;
    }
    return true;
}
</script>

</html>

hanya-memperbolehkan-angka-Javascript-Keperluan-validasi-form-lamongandev.com

5.Javascript untuk mengizinkan hanya huruf alfabet pada input
Seringkali terjadi input nama, eh si user nakal ngisi dengan angka. jadi begini validasinya agar si user nakal tidak mengisi input nama dengan angka :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>

<input type="text" name="nama" onkeypress="return cek_input(event)" placeholder="Ari Efendi">

<script>
function cek_input(evt) {
      e = (evt) ? evt : window.event;
      var regex = new RegExp("^[a-zA-Z \s]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        else
        {
        e.preventDefault();
        alert('Input hanya boleh di isi dengan huruf alfabet');
        return false;
        }
}
</script>

</html>

6.Javascript untuk periksa input harus sama dengan yang ditentukan

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>

<input type="text" id="nama_hewan" name="nama_hewan" onchange="cek_input();" placeholder="sapi">

<script>
function cek_input() {
      isi = document.getElementById('nama_hewan');
      if(!(isi.value=='sapi')){ //isi input harus "sapi"
        alert('Pengisian tidak benar');
        isi.value="";
      }
   
}
</script>

</html>

Pada contoh atas saya mengecek apakah input berisi kata “sapi”, jika tidak maka akan muncul peringatan “Pengisian tidak benar”

periksa-input-harus-sama-dengan-yang-ditentukan-Javascript-Keperluan-validasi-form-lamongandev.com

7.Javascript untuk periksa input harus ada karakter tertentu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>

<input type="text" id="inp" name="inp" onchange="cek_input();" placeholder="isi input">

<script>
function cek_input() {
      isi = document.getElementById('inp');
      if(isi.value.indexOf('bola') === -1){ //mencari kata bola
        alert('Pengisian tidak benar, harus ada kata "bola"');
        isi.value="";
      }
   
}
</script>

</html>

Pada script diatas saya akan mengecek value input apakah ada kata “bola”, jika tidak ada maka akan muncul peringatan “Pengisian tidak benar, harus ada kata “bola”

harus-ada-kata-tertentu-Javascript-Keperluan-validasi-form-lamongandev.com

8.Javascript memeriksa valid email
Sering kali pada input email dicurangi dengan di isi ngawur alias tidak email, maka berikut ini adalah basic javascript agar input email terisi dengan benar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>

<input type="text" id="email" name="email" onchange="cek_input_email();" placeholder="isi email">

<script>
    function cek_input_email() {
      email = document.getElementById("email").value;  
      var re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      if(re.test(email)){ //jika email benar
        alert("Email valid");
      } else{ //dan jika email tidak valid
        alert("Email tidak valid");
      }
   
    }
</script>

</html>

cek-email-Javascript-Keperluan-validasi-form-lamongandev.com

9.Javascript untuk mengisi value pada input
Sesuai dengan judul nomor 9 ini digunakan untuk mengisi otomatis input dengan value yang sudah ditentukan. begini basic javascriptnya

1
2
3
4
5
6
7
8
9
<html>

<input type="text" id="inp" name="inp">

<script>
    document.getElementById("inp").value="Isi input";
</script>

</html>

Maka tanpa mengisi dengan ketikkan keyboard input sudah terisi otomatis

mengisi-input-Javascript-Keperluan-validasi-form-lamongandev.com

10.Javascript accept type file pada input file upload
Yang ini sangat penting dan biasanya sering terjadi form input file gambar, eh malah di isi dengan file backdoor oleh si hacker. Maka dari itu pentingnya validasi pada form, begini basic scriptnya

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<html>

<input type="file" id="inp" name="inp" onchange="cek_extensi();">

<script>
    var ekstensi_diizinkan = [".jpg", ".jpeg", ".bmp", ".gif", ".png"]; //extensi yang di izinkan
    function cek_extensi() {
         var inp = document.getElementById("inp");
         var nama_file = inp.value; //deteksi namafile dari input
         var cek_invalid = false;
            for (var j = 0; j < ekstensi_diizinkan.length; j++) {
                var ext = ekstensi_diizinkan[j];
                if (nama_file.substr(nama_file.length - ext.length, ext.length).toLowerCase() == ext.toLowerCase()){
                cek_invalid = true;
                break;
            }
            }                  
        if (!cek_invalid) {
                alert("Maaf, file tidak valid. extensi yang di izinkan : " + ekstensi_diizinkan.join(", ")); //memberi peringatan
                return false;
        }    
        return true;
    }
</script>

</html>

filter-extensi-file-Javascript-Keperluan-validasi-form-lamongandev.com

11.Javascript disable & enable input
Yang ini fungsinya untuk menutup input agar user tidak mengisinya

disable-input-Javascript-Keperluan-validasi-form-lamongandev.com

1
2
3
4
5
6
7
8
9
10
<html>

<input type="text" placeholder="contoh input disable" id="inp" name="inp">

<script>
    document.getElementById("inp").disabled = true; //untuk disable/menutup input
    //document.getElementById("inp").disabled = false; //untuk enable/membuka input
</script>

</html>

Basic system validasi form diatas yakni menggunakan tag “onchange” pada input html yang berguna untuk memanggil function pengecekan,

basic-pengecekan-Javascript-Keperluan-validasi-form-lamongandev.com

Sesuai dengan nama tagnya yakni “onchange” yang jika diartikan dalam bahasa indo artinya yakni Dalam perubahan, Jadi setiap selesai perubahan input maka akan melakukan pemanggilan fungsi pengecekan. Tidak hanya dengan “onchange” anda juga bisa menggunakan tag “onkeypress”,”oninput”,”onkeydown”,”onkeyup” dll untuk memanggil fungsi pengecekan. Tentunya setiap tag mempunyai fungsi yang berbeda-beda dan tidak akan saya jelaskan di artikel ini, munkin artikel selanjutnya.

BERITA TERKAITDARI PENULIS