Selasa, 30 April 2013

Membuat Validasi Input Form Sederhana dengan Javascript


Kali ini ini saya lagi pengen nulis tutorial tentang javascript, tentunya untuk pemula. Nah, skenarionya seperti ini: saya kan punya form inputan, nah saya ingin form itu hanya akan menyimpan data yang valid. Sementara jika data yang dimasukkan
tidak valid maka akan tampil peringatan bahwa data yang dimasukkan salah atau tidak valid sehingga program tersebut tidak jadi disimpan.
Untuk lebih jelasnya silakan perhatikan gambar berikut ini.


Nah, gimana sobat? sudah paham kan maksudnya?
Sekarang kita akan memulai membuatnya, pertama buat formulir HTMLnya seperti code berikut:
<fieldset style="margin:auto; width:40%;">
<legend>Formulir Biodata</legend>
<form name="formulir" action="simpan_data.php" method="post" onSubmit="return validasi()">
    <p>
        Nama Lengkap : <br />
        <input type="text" name="nama" placeholder="nama lengkap Anda" />
    </p>
    
    <p>
        Jenis Kelamin : <br />
        <select name="jenis_kelamin">
            <option value="">-Pilih-</option>
            <option value="laki-laki">Laki-Laki</option>
            <option value="perempuan">Perempuan</option>
        </select>
    </p>
    
    <p>
        Email Anda : <br />
        <input type="text" name="email" placeholder="email Anda" />
    </p>
    
    <p>
        <input type="submit" value="Simpan Data" name="submit" />
        <input type="reset" value="Reset Form" name="reset" />
    </p>
</form>

</fieldset>

simpan dengan ekstensi *.html.

selanjutnya kita tambahi kode javascripnya pada file yg kita buat tadi, code javascript validasinya adalah sebagai berikut:
<script>
    function validasi(){
        var namaValid    = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
        var emailValid   = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        var nama         = formulir.nama.value;
        var jeniskelamin = formulir.jenis_kelamin.value;
        var email        = formulir.email.value;
        var pesan = '';
        
        if (nama == '') {
            pesan = '-Nama tidak boleh kosong\n';
        }
        
        if (nama != '' && !nama.match(namaValid)) {
            pesan += '-nama tidak valid\n';
        }
        
        if (jeniskelamin == '') {
            pesan += '-jenis kelamin harus dipilih\n';
        }
        
        if (email == '') {
            pesan += '-email tidak boleh kosong\n';
        }
        
        if (email !=''  && !email.match(emailValid)) {
            pesan += '-alamat email tidak valid\n';
        }
        
        if (pesan != '') {
            alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
            return false;
        }
    return true
    }
</script>
 
sehingga skrip lengkap form inputan kita menjadi seperti dibawah ini.
<script>
    function validasi(){
        var namaValid    = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
        var emailValid   = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
        var nama         = formulir.nama.value;
        var jeniskelamin = formulir.jenis_kelamin.value;
        var email        = formulir.email.value;
        var pesan = '';
        
        if (nama == '') {
            pesan = '-Nama tidak boleh kosong\n';
        }
        
        if (nama != '' && !nama.match(namaValid)) {
            pesan += '-nama tidak valid\n';
        }
        
        if (jeniskelamin == '') {
            pesan += '-jenis kelamin harus dipilih\n';
        }
        
        if (email == '') {
            pesan += '-email tidak boleh kosong\n';
        }
        
        if (email !=''  && !email.match(emailValid)) {
            pesan += '-alamat email tidak valid\n';
        }
        
        if (pesan != '') {
            alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
            return false;
        }
    return true
    }
</script>

<fieldset style="margin:auto; width:40%;">
<legend>Formulir Biodata</legend>
<form name="formulir" action="simpan_data.php" method="post" onSubmit="return validasi()">
    <p>
        Nama Lengkap : <br />
        <input type="text" name="nama" placeholder="nama lengkap Anda" />
    </p>
    
    <p>
        Jenis Kelamin : <br />
        <select name="jenis_kelamin">
            <option value="">-Pilih-</option>
            <option value="laki-laki">Laki-Laki</option>
            <option value="perempuan">Perempuan</option>
        </select>
    </p>
    
    <p>
        Email Anda : <br />
        <input type="text" name="email" placeholder="email Anda" />
    </p>
    
    <p>
        <input type="submit" value="Simpan Data" name="submit" />
        <input type="reset" value="Reset Form" name="reset" />
    </p>
</form>

</fieldset>

oke sekarang saatnya testing, buka file tadi dengan browser kesayangan sobat (Mozilla Firefox atau Google Chrome atau Opera atau Internet Explorer atau terserah apa aja ^_^)

sekian tutorial yang sangat sederhana ini, semoga bermanfaat. Salam Blogger Madura ^_^

5 komentar:

  1. sangat membantu terima kasih

    BalasHapus
  2. asanoer.com==mengatakan

    Wah, keren Gan, aku kalo buat input hanya php, tanpa java jadi pas validasi masih katrok punya,, hehehe..

    ThanxU Gun---

    BalasHapus
  3. gan kalo yang action nya itu kan simpan data.php,, berarti harus bikin prosesnya juga kan? dgn ekstensi *.php kan?? tolong jawabannya

    BalasHapus
  4. iya betul, kita bikin *.php buat nyimpan yang tentunya bisa kita tambah validasi di sisi server :)

    BalasHapus
  5. Info bagus. Aku bisa php tapi kesulitan dengan javascript. Contoh script ini bisa jadi media belajar juga untuk menggabungkan javascript dengan php terutama kaau harus berhubungan dengan data karena javascript bisa memberikan efek yang keren ke website kita.

    BalasHapus

Silakan berkomentar di blog ini, komentar Anda menjadi alasan kenapa saya harus menulis ^_^

Designed By Blogger Templates