Cek otomatis jika email telah digunakan dengan JQuery

Sering kali ketika sedang membuat sebuah form inputan untuk registrasi, dihadapkan dengan masalah validasi email. Email yang telah digunakan tidak dapat dipakai untuk registrasi kembali. Dengan menggunakan JQuery, validasi tersebut dapat di autosuggest (cek otomatis) kedalam database yang menyimpan email.

Dengan demikian, si user akan segera mengganti apabila email tersebut telah ada tanpa harus menyelesaikan semua inputan atau menekan tombol simpan.

Berikut ini kode untuk validasi form dengan jquery

$(document).ready(function(){
	var emailok = false;
	var boxes = $(".input_s1_normal");
	var myForm = $("#chkForm"), username = $("#username"), email = $("#email"), emailInfo = $("#emailInfo");
	
	//give some effect on focus
	boxes.focus(function(){
		$(this).addClass("input_s1_focus");
	});
	//reset on blur
	boxes.blur(function(){
		$(this).removeClass("input_s1_focus");
	});
	
	//Form Validation
	myForm.submit(function(){
		if(username.attr("value") == "")
		{
			alert("Enter Username");
			username.focus();
			return false;
		}
		if(email.attr("value") == "")
		{
			alert("Enter Email");
			email.focus();
			return false;
		}
		if(!emailok)
		{
			alert("Check Email");
			email.attr("value","");
			email.focus();
			return false;
		}
	});

Kemudian tambahkan dibawahnya kode jquery untuk mengecek keberadaan email dalam database

	email.blur(function(){
		$.ajax({
			type: "POST",
			data: "email="+$(this).attr("value"),
			url: "check.php",
			beforeSend: function(){
				emailInfo.html("Checking Email...");
			},
			success: function(data){
				if(data == "invalid")
				{
					emailok = false;
					emailInfo.html("Inavlid Email");
				}
				else if(data != "0")
				{
					emailok = false;
					emailInfo.html("Dah dipake emailnya");
				}
				else
				{
					emailok = true;
					emailInfo.html("Masih virgin uie lanjut gant");
				}
			}
		});
	});
});

Sedangkan kode php untuk mencocokkan email yang di request ke database adalah berikut ini :

<?php
//data connection file
require "config.php";
extract($_REQUEST);

if(eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email))
{
	$sql = "select * from users where email='$email'";
	$rsd = mysql_query($sql);
	$msg = mysql_num_rows($rsd); //returns 0 if not already exist
}
else
{
	$msg = "Ra bener";
}
echo $msg;
?>

Untuk mempraktikannya anda perlu membuat sebuah database dan 1 tabel dengan nama users, sebuah library jquery (bisa didownload) dan
1 desain inputan form. Untuk lebih jelasnya, silahkan download disini. Semoga bermanfaat😀

%d blogger menyukai ini: