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 ^_^

BAGIKAN KE:

15 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
  6. tutorailya sangat bagus sekali .... dan sangat membatu

    terima kasih atas infonya

    semoga blog'y terus berkembang, OK

    BalasHapus
  7. makasih sob, kebetulan saya lagi belajar javascript... Ninggalin jejak dulu...

    BalasHapus
  8. Terimakasih tutorialnya. sangat bagus dan lengkap

    BalasHapus
  9. Tolong jawab, fungsi return true & return false itu maksudnya untuk apa ya ??

    BalasHapus
  10. Tolong jawab, fungsi return true & return false itu maksudnya untuk apa ya ??

    BalasHapus
  11. gan bisa minta kontaknya gak?
    saya mau blajar sesuatu

    BalasHapus
  12. terima kasih ilmunya kak. Ini sangat bermanfaat untuk saya.

    BalasHapus