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