WHAT'S NEW?
Loading...

Real Time jQuery Validation if Email Already Exist



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>


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>

Untuk mengatur lokasi notifikasi error dapat menggunakan seperti berikut :


errorElement: 'span',
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>

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;
    }
  }

Dan, jika berhasil maka tampilannya akan seperti ini



Semoga bermanfaat :)

2 comments: Leave Your Comments

  1. permisi mau tanya..

    errorElement: 'span',
    errorLabelContainer: '.error'

    untuk menaruh source di atas dibagian mana yah?

    view, controller, atau model..
    tolong jelasin

    ReplyDelete
    Replies
    1. di view mas, itu merupakan attribute dari script validasi

      example :

      $(document).ready(function() {
      $("#formvalidate").validate({
      rules: {
      ...
      },
      messages: {
      ...
      },
      errorElement: 'span',
      errorLabelContainer: '.error'
      });
      });

      Delete