Hallo sobat mitra tekno niaga, pada tulisan kali ini Kami ingin memberikan tutorial sederhana tentang bagaimana cara membuat sebuah validasi inputan untuk alamat email. Tahukah kamu? validasi ini sifatnya sangatlah penting, terlebih lagi ketika aplikasi Anda memiliki sebuah service atau layanan untuk menghandle suatu pengiriman pesan ataupun data terhadap email tersebut. Jika format email salah, sudah dipastikan email tidak akan sampai ke penerima yang diharapkan.
Untuk menghindari hal tersebut, maka kita membutuhkan sebuah validasi untuk menilai format email yang di masukan valid atau tidak. Format email terdiri dari 3 bagian, yaitu:
Tiga bagian pada email ini dipisah oleh sebuah separator yaitu:
Jadi secara keseluruhan alamat email di tuliskan seperti berikut ini: nama_email@alamat_domain.jenis_domain
Dan yang harus Anda ketahui juga, jenis domain sangat banyak namun tidak akan Kami bahas pada tulisan ini karena fokus tulisan ini adalah bagaimana cara membuat validasi email dengan JavaScript. Untuk jenis-jenis domain akan Kami bahas pada tulisan berikutnya. Oke, langsung saja ya.
Baca Juga: Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript
Kita akan membuat sebuah function dengan untuk membuat validasi tersebut, lihat script dibawah ini:
function validasiEmail() {
var rs = document.forms["formInput"]["email"].value;
var atps=rs.indexOf("@");
var dots=rs.lastIndexOf(".");
if (atps<1 || dots<atps+2 || dots+2>=rs.length) {
alert("Alamat email tidak valid.");
return false;
} else {
alert("Alamat email valid.");
}
}Penjelasan:
Baris ke-1 : Buka dan deklarasi nama function
Baris ke-2 : Deklarasi variable rs, berisi value dari element input email
Baris ke-3 : Deklarasi variable atps, berisi metode indexOf untuk mencari sebuah karakter "@" pada element input email
Baris ke-4 : Deklarasi variable dots, berisi metode lastIndexOf untuk mencari sebuah karakter "." pada element input email dari kanan ke kiri
Baris ke-5 : Mulai kondisi dengan formula validasi yaitu:
Jika atps kurang dari 1 (satu) atau Jika dots kurang dari atps di tambah 2 (dua) atau dots di tambah 2 (dua) lebih besar sama dengan dari jumlah panjang karakter rs.
Baris ke-6 : Jika sesuai dengan formula kondisi maka alert dengan pesan "Alamat email tidak valid." akan muncul.
Baris ke-7 : Menahan agar tidak masuk ke proses selanjutnya
Baris ke-8 : else, pengecualian.
Baris ke-9 : Jika tidak sesuai dengan formula kondisi maka alert dengan pesan "Alamat email valid." akan muncul.
Baris ke-10: Tutup kondisi
Baris ke-11: Tutup function
Mudah kan?
Untuk melakukan testing sudah Kami sertakan full source code-nya dibawah ini, Anda cukup copy paste script tersebut di komputer Anda masing-masing.
<html>
<head>
<script type="text/javascript">
function validasiEmail() {
var rs = document.forms["formInput"]["email"].value;
var atps=rs.indexOf("@");
var dots=rs.lastIndexOf(".");
if (atps<1 || dots<atps+2 || dots+2>=rs.length) {
alert("Alamat email tidak valid.");
return false;
} else {
alert("Alamat email valid.");
}
}
</script>
</head>
<body>
<form name="formInput" onsubmit="validasiEmail();">
<input type="text" name="email">
<input type="submit" value="submit">
</form>
</body>
</html>Demikian pembahasan tentang Membuat Validasi Input Email Tidak Valid dengan JavaScript, semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca. Sampai jumpa di tulisan berikutnya. Terima Kasih
