Cara Membuat Validasi Cek Email Dengan Ajax Part2

Melanjutkan dari sesi sebelumnya, pada kesempatan kali ini saya akan menjelaskan cara membuat validasi cek email dengan ajax part2, jika pada sesi yang sebelumnya teman-teman sudah melakukan pembuatan database, table beserta dengan form html nya, pada penjelasan disini teman-teman akan melanjutkan membuat fungsi cekemail dengan ajax nya guna melengkapi file index.php tersebut yang nantinya untuk melakukan pengecekan apakah email tersebut sudah terdaftar atau belum dan yang untuk melakukan pengecekan tersebut adalah si ajax kedalam suatu file yang dimana didalam file tersebut terdapat query untuk pengecekan ke table database. Untuk membuatnya kalian bisa ikuti tahapan yang saya lanjutkan dibawah ini

Berikut Tahapannya :

• Masih difile yang sama yaitu file index.php
• Tambahkan kode seperti berikut tepat dibawah kode penutup element </body> atau diatas sebelum kode element </html>
• Berikut Kodenya :

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var email = "";
var cekemail = function(){
var email = $("input[name=email]").val();
  if(email!=""){
   $('.status').html("Tunggu sebentar..");
   $.ajax({
       url: "cek_email.php",
       type: 'GET',
       data: {email : email},
       success: function(data) {  
 
   $('.pesan').html('');
   if(data=="1"){
    $('.pesan').html('<h5 class="text-danger"> Email <b>'+email+'</b> sudah terdaftar..! </h5>');
   }else{
    $('.pesan').html('<h5 class="text-success"> Email <b>'+email+'</b> tersedia.. </h5>');
   }
   },
    error: function(e) {
    $('.pesan').html('Ada gangguan koneksi !');
  }
 });
 
 }
}
</script>

• Sehingga kode lengkap di file index.php tersebut menjadi seperti ini :

<html>
<head>
<meta charset="utf-8">
<title>Cara Membuat Validasi Cek Email Dengan Ajax</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
</head>
<body>
<div class="container">
	<div class="row">
        <div class="col-md-12">
            <form action="" method="POST" role="form">
            <fieldset>
            <h4 class="text-center">Cara Membuat Validasi Cek Email Dengan Ajax</h4>
 
            <div class="form-group">
                <label for="email"><span class="email">* </span> Email Valid: </label> 
                <input class="form-control" type="email" name="email" oninput="cekemail()" placeholder="your@mail.com" required>   
                <div class="status"></div>
            </div>
 
            <div class="form-group">
                <input class="btn btn-success" type="submit" name="submit" value="Register">
            </div>
            </fieldset>
            </form>
            </div>
            </div>
</body>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript">
var email = "";
var cekemail = function(){
var email = $("input[name=email]").val();
  if(email!=""){
   $('.status').html("Tunggu sebentar..");
   $.ajax({
       url: "cek_email.php",
       type: 'GET',
       data: {email : email},
       success: function(data) {  
 
   $('.pesan').html('');
   if(data=="1"){
    $('.pesan').html('<h5 class="text-danger"> Email <b>'+email+'</b> sudah terdaftar..! </h5>');
   }else{
    $('.pesan').html('<h5 class="text-success"> Email <b>'+email+'</b> tersedia.. </h5>');
   }
   },
    error: function(e) {
    $('.pesan').html('Ada gangguan koneksi !');
  }
 });
 
 }
}
</script> 

</html>

• Jika sudah save terlebih dahulu file index.php tersebut

Untuk pembahasan selanjutnya, akan saya jelaskan cara membuat validasi cek email dengan ajax pada sesi berikutnya, semoga bermanfaat.