yes
no
10/Promotion/slider
no

Validasi Form Register dengan Javascript

5 komentar


Pada suatu website yang mengijinkan user untuk menjadi member dari website tersebut, disediakan Form Register yang akan diisi oleh user. Dengan adanya data user pada suatu website, maka perusahaan akan mempunyai database user dan dengan mudah dapat melakukan komunikasi dengan user, baik untuk kepentingan follow up user maupun untuk maintenance member. Untuk menghindari kesalahan data yang diinput oleh user pada Form Register tersebut, maka Form Register harus divalidasi sebelum data yang diinput masuk ke database.  Validasi Form Register pada kasus ini menggunakan Javascript. Selain dengan Javascript, validasi Form Register dapat juga dilakukan dengan bahasa pemrograman PHP, VB, VB.Net, Java dll. Adapun tampilan dari Form Register tersebut adalah :

 

Bahasa-bahasa pemrograman diatas dapat dipelajari di lembaga pendidikan kursus Komputer atau IT Training Center. Computer First adalah lembaga pendidikan kursus komputer yang membuka kursus bahasa-bahasa pemrograman tersebut.

Pada Form Register diatas, user harus mengisi data nama user, email, sandi, jenis kelamin dan foto dengan ketentuan sebagai berikut :
Nama     
Nama tidak boleh kosong (harus diisi) dan nama harus huruf (tidak boleh angka). Jika kosong/tidak diisi maka akan muncul notifikasi bahwa nama masih kosong. Dan jika nama diisi dengan angka maka akan muncul notifikasi bahwa nama harus huruf.
Email  :  
Email tidak boleh kosong, harus mengandung simbol @ dan tanda titik. Tanda titik diletakkan minimal 2 karakter setelah simbol @ dan minimal 2 karakter sebelum akhir email. Jika tidak mengandung simbol @ atau tanda titik, maka akan muncul notifkasi bahwa email tidak valid.
Sandi  :   
Kata Sandi harus diisi, jika kosong akan muncul notifikasi bahwa sandi masih kosong. Jumlah karakter dari kata sandi minimum 6 karakter dan maksimum 8 karakter. Jika jumlah kata sandi kurang dari 6 karakter atau lebih dari 8 karakter, maka akan muncul notifikasi bahwa kata sandi minimum 6 karakter dan maksimum 8 karakter.
Jenis Kelamin :  
Jenis Kelamin diisi dengan cara memilih salah satu dari 2 pilihan yang disediakan (Laki-laki atau Perempuan).
Foto :  
Foto diisi dengan mengupload foto user.

Untuk lebih jelasnya mengenai validasi Form Register dengan Javascript, penulis sudah membuat skrip/kode programnya sebagai berikut :

Nama File : register.php
<html>
<head>
              <title>Validasi Form Register JS</title>
<style type="text/css">
body {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 12px;
}
</style>
<script type="text/javascript">
function valregister(){
            var x=register.txtusername.value;
            var x1=parseInt(x);
            if(register.txtusername.value==""){
                        alert("Nama masih kosong");
                        register.txtusername.focus();
                        return false;
            }
            if(isNaN(x1)==false){
                        alert("Nama harus huruf");
                        register.txtusername.focus();
                        return false;          
            }
            var x=register.txtemail.value;
            if(x==""){
                        alert("Alamat Email masih kosong");
                        register.txtemail.focus();
                        return false;
            }else{
            var atpos=x.indexOf("@");
            var dotpos=x.lastIndexOf(".");
            if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                        alert("Alamat Email Tidak Valid");
                        register.txtemail.focus();
                        return false;
            }
            }
            var z=register.txtpassword.value;
            var panjang=z.length;
            if(register.txtpassword.value==""){
                        alert("Sandi masih kosong");
                        register.txtpassword.focus();
                        return false;
            }
            if(panjang<6 || panjang>8){
                        alert("Sandi minimum 6 karakter dan maksimum 8 karakter");
                        register.txtpassword.focus();
                        return false;
            }
            if ( ( register.jk[0].checked == false ) && ( register.jk[1].checked == false ) ){
        alert ( "Pilih gender: Laki-laki atau Perempuan " );
                        return false;
    }
                       
            if(register.foto.value==""){
                        alert("Foto masih kosong");
                        return false;
            } 
             return true; 
}
</script>
</head>
<body>
<form name="register" action="" method="post" enctype="multipart/form-data" onSubmit="return valregister()">
  <br />
  <table align="left" width="364" border="0">
  <tr>
    <td colspan="2" bgcolor="#660099">&nbsp;</td>
    </tr>
  <tr>
    <td width="113">Nama</td>
    <td width="241"><label>
      <input name="txtusername" type="text" id="txtusername" value="" /></label></td>
  </tr>
  <tr>
    <td height="32">Email</td>
    <td><input type="text" name="txtemail" id="txtemail" size="30" maxlength="50"></td>
  </tr>
  <tr>
    <td height="32">Sandi</td>
    <td><label>
      <input name="txtpassword" type="password" id="txtpassword">
    </label></td>
  </tr>
  <tr>
    <td height="40">Jenis Kelamin</td>
    <td>
      <label></label>
      <label></label>
      <div align="left"><input name="jk" type="radio" value="Laki-laki">
Laki-laki
          <input name="jk" type="radio" value="Perempuan">
          Perempuan
          </label></div>     </td>
  </tr>
  <tr>
    <td>Foto</td>
    <td><label>
      <input name="foto" type="file" id="foto" />
    </label></td>
  </tr>
  <tr>
    <td colspan="2"><input name="save" type="submit" id="save" value="Simpan" /></td>
  </tr>
  <tr>
    <td colspan="2" bgcolor="#660099">&nbsp;</td>
            </tr>
</table>
</form>
</body>
</html>

Untuk memeriksa keandalan program, jalankan Form Register di web browser, kemudian isi nama dengan angka, maka akan tampil notifikasi, bahwa nama yang diisikan harus berupa huruf.

 
Demikian artikel ini penulis buat, semoga artikel ini bermanfaat untuk semua pembaca blog Computer First. Silakan dicoba ya...., jangan lupa beri komentarnya…….
author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

5 komentar

  1. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  2. Pak saya mau tanya :

    1. if(isNaN(x1)==false){
    alert("Nama harus huruf");
    register.txtusername.focus();
    return false;
    }

    Nah itu ada tulisan "isNaN" maksudnya apa pak?
    apa memang sudah ketetapan?

    dan satu lagi pertanyaan :

    2. var x=register.txtemail.value;
    if(x==""){
    alert("Alamat Email masih kosong");
    register.txtemail.focus();
    return false;
    }

    bukankah variabel x sudah digunakan di "register.txtusername.value" ?
    mohon penjelasannya pak.

    BalasHapus
    Balasan
    1. Komentar ini telah dihapus oleh pengarang.

      Hapus
    2. Jawaban:

      1. isNaN kepanjangan dari is Not a Number maksudnya untuk memeriksa apakah suatu nilai dalam
      sebuah variabel (x1) adalah bukan angka/teks? isNanN(x1)==false artinya untuk memeriksa apakah nilai dari x1 sebuah teks bernilai salah atau dengan kata lain apakah niliai yang disimpan pada x1 adalah angka (number). jika ya maka akan muncul notifikasi bahwa Nama harus huruf. dalam hal ini itu sudah merupakan ketetapan untuk mengecek nilai yang dikandung oleh variabel x1 tersebut.

      2.Ya,variabel x sudah menyimpan nilai yang diambil dari txtusername,tapi tidak berarti bahwa variabel x tidak dapat menyimpan nilai dari elemen HTML lainnya. Variabel x bisa menyimpan nilai dari elemen HTML lain, seperti txtemail, txtpassword dan lain-lain.Cuma ketika variabel x menyimpan nilai txtemail,maka nilai txtusername yang sudah disimpan di variabel x akan hilang (ketimpa) oleh nilai dari txtemail (overwrite) karena var x adalah sebuah variabel yang hanya mampu menampung satu data, yang otomatis old data data overwrite oleh new data. Demikian penjelasan dari saya,semoga bisa membantu.Untuk lebih jelasnya bisa datang dan belajar di Computer First.Telp:02145854319.

      Hapus
  3. Alhamduliillaaaah, makasih banyak gan, sekian lama broadcash baru ini ni yg sesuai dengan materi, sukses selallu yah ... amin :)

    BalasHapus

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)