rachmat

Current Date:27 September, 2020

Membuat Validasi Input Email Tidak Valid dengan JavaScript

JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Google Chrome, Internet Explorer, Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
5
(31)

Hallo sobat, pada tulisan kali ini Saya 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:

  1. Nama email
  2. Nama atau alamat domain
  3. Jenis domain

Tiga bagian pada email ini dipisah oleh sebuah separator yaitu:

  1. A keong / Et / At Sign “@
  2. Tanda Titik “.

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 Saya bahas pada tulisan ini karena fokus tulisan ini adalah bagaimana cara membuat validasi email dengan JavaScript. Untuk jenis-jenis domain akan Saya bahas pada tulisan berikutnya. Oke, langsung saja ya.

Baca Juga: Cara Membuat Validasi Inputan Wajib Angka dengan JavaScript

Membuat Validasi Email

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 Saya 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, silahkan tinggalkan komentar pada tulisan ini bila ingin bertanya atau memberi masukan. Semoga tulisan ini bisa memberikan manfaat untuk Anda yang membaca, sampai bertemu di tulisan berikutnya. Terima Kasih

Apakah artikel ini membantu Anda?

klik bintang untuk memberikan nilai

Total nilai 5/5 dari 31 suara

Tidak ada suara sejauh ini! Jadilah yang pertama memberi nilai pada tulisan ini.

2 Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *



Hai kak, 1x klik iklan pada blog ini merupakan bentuk donasi Anda untuk kemajuan blog ini. 😉