Tips

Tutorial Cara Validasi Email dengan AJAX jQuery dan PHP – Jurnal Web

Validasi email dengan AJAX jQuery dan PHP | Melakukan pengecekan pada email atau biasa disebut dengan istilah email validation memang perlu untuk dilakukan, terutama ketika kita meminta user untuk memasukan alamat emailnya pada sebuah form yang nantinya email tersebut digunakan untuk banyak hal penting.

Jadi jangan sampai email yang dimakukan oleh user adalah sembarangan, karena akan menyebabkan banyak kerugian nantinya, sistem tidak berjalan semestinya dan bahkan menimbulkan kerugian pada si pemilik website maupun pengguna.

Email yang di input biasanya akan dipergunakan untuk konfirmasi, pengiriman tagihan pembayaran, tracking, newsletter, dan lain sebagainya. Jadi email harus valid.

Pada tutorial terdahulu kita sudah pernah bahas tentang Cara Validasi Alamat Email dengan PHP, namun cara tersebut masih dirasa kurang interaktif karena kurang ringkas dan tidak responsif.

Validasi Email dengan AJAX jQuery dan PHP

Kali ini jurnalweb.com akan memberikan sedikit contoh validasi alamat email dengan AJAX jQuery dan PHP. Sehingga kita bisa melakukan validasi secara email langsung, tanpa perlu klik tombol dan tanpa refresh

Kode HTML

Script HTML yang diperlukan untuk contoh kali ini hanyalah sebuah input text dan SPAN untuk menulis pesan status, karena kita akan lakukan validasi saat user mengetik email tersebut, seperti yang sering kita lihat saat mendaftar ke gmail ataupun yahoo.

Email: <input type="email" id="email"> <span id="feedback"></span>

Kode Javascript

Pada kesempatan kali ini kita mencoba menggunakan fungsi $.post() yang ada di jQuery untuk mengirim data yang nantinya akan diproses oleh file bernama check_email.php. File javascript dibawah ini tidak kami taruh di file javascript khusus, namun kami taruh di bagian paling bawah halaman web, sebelum tag [/body].

Buah sebuah fungsi bernama validate()

Pertama sertakan script jquery yang bisa di download disini.

function validate(email){

	$.post('validate_email.php', { email: email }, function(data){
		$('#feedback').text(data);
	});

}

Kemudian kita buat aksi dimana ketika user klik field email dan mengetik alamat email maka akan memanggil fungsi validate(), dan hasilnya akan di cetak pada tag yang memiliki id #feedback, yaitu tag SPAN.

$(document).ready(function(){

	$('#email').focusin(function(){

		if($('#email').val() === ''){
			$('#feedback').text('Go on, enter a valid email address....');
		}else{
			validate($('#email').val());
		}

		
	}).blur(function(){
		$('#feedback').text('');
	}).keyup(function(){
		validate($('#email').val());
	});

});

Kode PHP untuk validasi email

Data yang dikirim menggunakan fungsi $.post() pada jQuery tadi selanjutnya di proses oleh file check_email.php yang isinya sebagai berikut.

	if(isset($_POST['email'])){
		$email = $_POST['email'];

		if(!empty($email)){

			if(filter_var($email, FILTER_VALIDATE_EMAIL) === false){
				echo ' <span style="color:red">Sorry, email belum valid</span>';
			}else{
				echo ' 👌 email sudah valid';
			}

		}
	}

Kode PHP untuk cek email

Disitu tampak kita pertama mengecek apakah ada kiriman $_POST[’email’], jika ada maka akan  di cek apakah kiriman tersebut kosong atau tidak, jika tidak kosong maka selanjutnya diproses dengan fungsi filter_var() untuk mengecek email, fungsi ini sudah disediakan oleh PHP. Kita cukup melempar variabel $email yang berisi data yang di input oleh user.

Demo & Download

Jika anda tertarik untuk mencoba, Anda bisa DOWNLOAD script ini dan mencobanya langsung di server lokal Anda (localhost).

Semoga tutorial ini semakin menambah pengetahuan kita semua tentang cara membuat website yang lebih interaktif dan responsif dengan jQuery AJAX dan juga PHP tentunya.


Source link

error: Content is protected !!