Graha Pengetahuan: Validasi Textbox hanya bisa Angka atau Huruf Menggunakan JavaScript

Pada postingan kali ini adalah Validasi Textbox hanya bisa Angka atau Huruf pada PHP. karena sering terjadi kesalahan pada saat pengguna/user menginputkan data pada sebuah texboxt. contoh nya adalah pada saat menginputkan data usia yang seharusnya hanya bernilai angka seperti 25, karena kurang pahamnya user bisa saja user menginputkan 25 tahun. dari contoh yang kita lihat di atas bahwa ada kesalahan dalam input data yaitu yang seharusnya angka saja menjadi varchar. sehingga nanti akan terjadi kesalahan dalam program. hal tersebut juga bisa terjadi sebaliknya yaitu textbot hanya boleh diisi hanya huruf saja.

baiklah untuk menghindari kesalahan tersebut maka kita perlu sedikit javascript untuk mencegah hal tersebut terjadi. jadi cara kerjanya adalah angka tidak akan muncul jika kita ketikkan pada textbox yang hanya boleh diisi oleh huruf. begitu juga sebaliknya huruf tidak akan muncul jika kita ketikkan pada textbox yang hanya boleh diisi oleh angka.

langkah pertama yang kamu siapkan adalah ketikkan kode dibawah ini pada text editor yang kamu sayangi dan simpan dengan nama "biodata.php" tanpa tanda kutip :

<?Php
echo"<table width=100% border=0 cellpadding=5 cellspacing=0>
   <tr><tr> BIODATA</td></tr>
<tr><td width=100>Nama </td><td width=1>:</td><td><input type=text      name=nama onkeypress='return isNumberKey(event)'></td></tr>
    <tr><td>Umur</td><td>:</td><td><input type=text name=umur onkeypress='return isNumberKeyTrue(event)' maxlength=2 onPaste='false'></td></tr></table>";
?>

kemudian langkah kedua adalah kita siapkan javascript untuk mengecek input yang di ketikkan oleh user melalui keyboard dan mencegah input data pada textboxt yang telah ditentukan, seperti di bawah ini :

//Hanya boleh Diisi dengan huruf

function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if ((charCode < 65) || (charCode == 32))
            return false;
         return true;
      }

//Hanya boleh Diisi dengan Dengan Angka
function isNumberKeyTrue(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 65)
            return false;
         return true;
      }

bentuk kode keseluruhan untuk validasi textbox hanya bisa angka atau huruf saja pada php adalah sebagai berikut :

<html>
<title>Untitled Document</title>
<script type="application/javascript">
function isNumberKey(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if ((charCode < 65) || (charCode == 32))
            return false;
         return true;
      }
</script>
<script type="application/javascript">
function isNumberKeyTrue(evt)
      {
         var charCode = (evt.which) ? evt.which : event.keyCode
         if (charCode > 65)
            return false;
         return true;
      }
</script>
</head>

<body>
<?Php
echo"<table width=100% border=0 cellpadding=5 cellspacing=0>
        <tr><tr> BIODATA</td></tr>
        <tr><td width=100>Nama </td><td width=1>:</td><td><input type=text name=nama onkeypress='return isNumberKey(event)'></td></tr>
        <tr><td>Umur</td><td>:</td><td><input type=text name=umur onkeypress='return isNumberKeyTrue(event)' maxlength=2 onPaste='false'></td></tr>
        </table>";
?>
</body>
</html>

Selamat anda telah berhasil membuat validasi pada masing-masing textbox. silahkan berkreasi dan mengembangkannya.

Sekian postingan kali ini, semoga bermanfaat

scriptnya dapat di download disini

9 comments:

Unknown18 August 2015 at 23:58
backspace jadi gak bisa gan mohon di koreksi kembali
Unknown3 September 2015 at 21:59
terimakasih sangat membantu banget
Anonymous8 October 2015 at 16:09
kalai hanya boleh diinput angka 0.1 s/d 100 gimana validasinya ?
septianto045 February 2016 at 10:05
terimakasih pak. membantu banget.
www.tutorialcoreldraws.com
Anonymous6 June 2016 at 15:45
terimakasiiih..
Unknown20 June 2016 at 13:14
tank's gan, sangat membantu
mas basha11 November 2016 at 19:21
ketika mengetikkan huruf,hrufnya tidak bisa dihapus gan
Unknown22 March 2017 at 22:26
keren,,mantep tutorialnya
wiranto27 March 2020 at 21:37
Terima kasih kak website ini sangat bermanfaat untuk saya dengan penjelasannya. Saya merasa senang dapat ilmu tentang Membuat validasi pada form HTML menggunakan javascript. Materi yang disampaikan oleh kakak sangat mudah dimengerti. trus webnya bagus,sangat jelas, lengkap dengan penjelasannya sertakan gambar dong kak, kodingnya & mudah di pahami terus berkreasi kak .
Salam kenal kak nama saya Wiranto kls (Si2K), kunjungi juga dong website kampus kami https://www.atmaluhur.ac.id