Membuat form Validasi Email Dengan Menggunakan Javascript

Assalamualaikumwarahmatullahi wabarakaatuh. Salah satu fungsi yang harus ada di dalam form online adalah validasi. Validasi sangat penting agar para pengguna dapat memberikan data yang benar sesuai yang diminta oleh oleh form. Coba seandainya saja, form nomor telpon dapat diisi dengan huruf, atau form email dapat diisi dengan nomor atau karakter yang tidak mengandung @ dan (.), tentu hal ini akan sangat merepotkan kita si pengumpul data, karena data yang dimasukkan tidak valid.

Ada banyak cara yang dapat diterapkan untuk melakukan vallidasi terhadap form online yang dibuat. Pada tutorial kali ini saya akan membuat form validasi email dengan menggunakan javascript, gimana caranya ? ikuti langkah-langkah berikut ini

Membuat Form Validasi Email Dengan Javascript

Buat file dengan nama latihan.html, karena kita menggunakna javascript anda dapat melatakkan filenya disembarang tempat, jadi tidak perlu dimasukkan ke htdocs. Copy paste script di bawah ini, lalu save.

<form name="test" onsubmit="cekemail(this.test2.value); return false">
    <input type="text" size="20" name="test2">
    <input type="submit" value="submit">
    <script>
        function cekemail(email){
            if(email.indexOf("@")!=-1 && email.indexOf(".")!=-1){
                alert("ini adalah email");
            }
            else{
                alert("ini bukan email");
            }
        }
    </script>
</form>

Penjelasan
kita membuat sebuah form sederhana yang terdiri dari input text dan button. saat kita mengklik button, maka fungsi cekemail otomatis akan dipanggil dan akan mengecek data yang diinput oleh user. Jika data yang diinput mengandung tanda @ dan ., maka browser akan menampilkan alerbox bertulisan "ini adalah email" dan jika salah satu syarat di atas tidak terpenuhi atau keduannya tidak terpenuhi maka browser akan menampilkan alertbox bertulisan "ini bukan email"

Coba anda jalankan di browser, cari file latihan.html, klik kanan dan buka dengan browser yang sering anda gunakan. Hasilnya akan tempak seperti gambar di bawah ini.jika anda memasukkan email yang benar maka, akan menampilkan alert box bertulisan "ini adalah email".

Alert Box jika email yang dimasukkan benar

Atau jika anda memasukkan email yang salah maka akan menampilkan alert box bertullisan "ini bukan email"

Alert Box jika email yang dimasukkan salah

Ok, sekian tutorial membuat validasi email dengan menggunakan javascript, mudah-mudahan bermanfaat bagi kita semua. Ada kesulitan, atau ada error silahkan tanyakan di kolom komentar di bawah ini. Happy coding!!!