Halo, kali ini gua akan membagikan bagaimana caranya mengecek jika ada email yang sudah terpakai pada database, dan langsung muncul notifikasi kalo email itu sudah terpakai.
Disini, gw menggunakan CodeIgniter dan untuk validasinya menggunakan jQuery + jQuery Validator, dan disini gw asumsikan pembaca sudah mengerti dasar dari PHP terutama OOP.
1. Buat database, config CodeIgniternya, bla bla bla ngerti lah ya
2. Langsung ke form, buatlah sebuah form bebas :
<html>
...
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
</head>
</body>
<form id="formvalidate"...>
...
<input type="text" id="email" name="email" placeholder="Email">
...
</form>
...
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
</head>
</body>
<form id="formvalidate"...>
...
<input type="text" id="email" name="email" placeholder="Email">
...
</form>
3. Dan untuk validasinya, seperti berikut :
<script type="text/javascript">
$(document).ready(function() {
$("#formvalidate").validate({
rules: {
email: {
remote: {
url: "<?=base_url()?>/namacontroller/validateEmailExist",
type: "post",
data: {
email: function() {
return $("#email").val();
}
}
}
}
},
messages: {
email: {
remote: "Email telah diambil"
}
}
});
});
</script>
$(document).ready(function() {
$("#formvalidate").validate({
rules: {
email: {
remote: {
url: "<?=base_url()?>/namacontroller/validateEmailExist",
type: "post",
data: {
email: function() {
return $("#email").val();
}
}
}
}
},
messages: {
email: {
remote: "Email telah diambil"
}
}
});
});
</script>
Untuk mengatur lokasi notifikasi error dapat menggunakan seperti berikut :
errorElement: 'span',
errorLabelContainer: '.error'
errorLabelContainer: '.error'
errorElement memberikan perintah untuk membaca element mana yang berfungsi untuk menampilkan error, pada contoh diatas menggunakan span, span dapat diganti sesuai kebutuhan
<span id="error"></span>
dan errorLabelContainer berguna untuk memberikan style pada error, contoh :
<style media="screen">
.error {
font-size: 12px;
color: red;
}
</style>
.error {
font-size: 12px;
color: red;
}
</style>
4. Prosesnya
public function validateEmailExist() {
if (array_key_exists('email', $_POST)) {
if ($this->emailexist($this->input->post('email'))==TRUE) {
echo json_encode(FALSE);
} else {
echo json_encode(TRUE);
}
}
}
private function emailexist($email) {
$this->db->select('email');
$this->db->where('email', $email);
$query = $this->db->get('nama_table');
$num = $query->num_rows();
if ($num > 0) {
return TRUE;
} else {
return FALSE;
}
}
if (array_key_exists('email', $_POST)) {
if ($this->emailexist($this->input->post('email'))==TRUE) {
echo json_encode(FALSE);
} else {
echo json_encode(TRUE);
}
}
}
private function emailexist($email) {
$this->db->select('email');
$this->db->where('email', $email);
$query = $this->db->get('nama_table');
$num = $query->num_rows();
if ($num > 0) {
return TRUE;
} else {
return FALSE;
}
}
Dan, jika berhasil maka tampilannya akan seperti ini
Semoga bermanfaat :)
permisi mau tanya..
ReplyDeleteerrorElement: 'span',
errorLabelContainer: '.error'
untuk menaruh source di atas dibagian mana yah?
view, controller, atau model..
tolong jelasin
di view mas, itu merupakan attribute dari script validasi
Deleteexample :
$(document).ready(function() {
$("#formvalidate").validate({
rules: {
...
},
messages: {
...
},
errorElement: 'span',
errorLabelContainer: '.error'
});
});