rachmat

Current Date:27 September, 2020

Cara Membuat Validasi Inputan Wajib Huruf dengan JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
4.9
(26)

Hallo sobat, pada tulisan kali ini Saya ingin memberikan tutorial sederhana tentang bagaimana cara membuat sebuah validasi inputan wajib menggunakan Huruf. Tahukah kamu? validasi ini sifatnya sangatlah penting, karena untuk menghindari terjadi kesalahan ketik oleh user atau pengguna aplikasi. Jika informasi yang di input user salah, sudah dipastikan data yang di simpan ke dalam aplikasi tidak valid.

Data inputan yang harus menerapkan validasi ini antara lain: Nama, Tempat Lahir, Nama Kota dan lain-lain. Yuk, mari baca dan simak tutorial ini sampai habis.

Membuat Validasi Huruf

Untuk membuat validasi ini, Anda harus membuat sebuah function seperti berikut ini:

function validation(){
  var validasiHuruf = /^[a-zA-Z ]+$/;
  var nama = document.getElementById("nama");
  if (nama.value.match(validasiHuruf)) {
     alert("Nama Anda adalah " + nama.value);
  } else {
     alert("Masukkan nama Anda!\nFormat wajib huruf!");
     nama.value="";
     nama.focus();
     return false;
  }
}

Penjelasan:
Baris ke-1 : Buka dan deklarasi nama function
Baris ke-2 : Deklarasi variable validasiHuruf, berisi ReGex (Regular Expression) Huruf atau Letter.
Baris ke-3 : Deklarasi variable nama, berisi value dari element input.
Baris ke-4 : Mulai kondisi dengan formula validasi yaitu:
Jika nama mengandung Huruf.
Baris ke-5 : Jika sesuai dengan formula kondisi maka alert dengan pesan “Nama Anda adalah (value dari element input)” akan muncul.
Baris ke-6 : else, pengecualian.
Baris ke-7 : Jika tidak sesuai dengan formula kondisi maka alert dengan pesan “Masukkan nama Anda! Format wajib huruf!” akan muncul.
Baris ke-8 : Kosongkan atau reset element input.
Baris ke-9 : Memberikan fokus indikator pada element input.
Baris ke-10: Menahan agar tidak masuk ke proses selanjutnya.
Baris ke-11: Tutup kondisi
Baris ke-12: Tutup function

Mudah kan?

Baca Juga: Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript

Untuk melakukan testing sudah Saya sertakan full source code-nya dibawah ini, Anda cukup copy paste script tersebut di komputer Anda masing-masing.

<html>
<head>
<script type="text/javascript">
function validation(){
  var validasiHuruf = /^[a-zA-Z ]+$/;
  var nama = document.getElementById("nama");
  if (nama.value.match(validasiHuruf)) {
      alert("Nama Anda adalah " + nama.value);
  } else {
      alert("Masukkan nama Anda!\nFormat wajib huruf!");
      nama.value="";
      nama.focus();
      return false;
  }
}
</script>
</head>
<body>

Nama:<br>
<input type="text" id="nama">
<button onclick="validation()"> cek </button>

</body>
</html>

Demikian pembahasan tentang Cara Membuat Validasi Inputan Wajib Huruf dengan JavaScript, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 4.9/5 dari 26 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

1 Komentar

  1. Iman Reply

    kalau validasi secara bersamaan bagaimana gan?

    seperti form username facebook, validasi email & nomor ponsel

Leave a Reply

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



Hai kak, 1x klik iklan pada blog ini merupakan bentuk donasi Anda untuk kemajuan blog ini. 😉