Cara Membuat Validasi Cek Email Dengan Ajax Part1

Pada kesempatan kali ini saya akan menjelaskan cara membuat validasi cek email dengan ajax. Perlu teman-teman ketahui sebelumnya, untuk membuat website yang interactive dan bisa memudahkan penggunanya dalam mendapatkan informasi-informasi dari setiap proses yang ada, perlu adanya validasi guna proteksi dari setiap proses-proses yang sudah dilaluinya. Biasanya pada umumnya untuk validasi tersebut sering di pasang di form-form, karena dari form tersebut biasanya terdapat proses yang dilakukan seperti menyimpan data, ubah data dan hapus data dan biasanya validasi tersebut berguna untuk menghindari terjadinya data kosong yang tidak terisi disuatu komponen form dan untuk menghindari terjadinya duplikasi data.

Seperti pada contoh kasus disini yang akan saya buat adalah validasi untuk mengecek email yang sudah ada atau yang sudah terdaftar pada form registrasi, jika email yang dimasukan tersebut sudah terdaftar atau sudah ada didatabase maka akan menampilkan pesan email sudah terdaftar dan sebaliknya jika email belum ada atau belum terdaftar maka akan menampilkan pesan email tersedia. Langsung saja untuk membuatnya kalian bisa ikuti tahapan yang saya contohkan dibawah ini.

Berikut Tahapannya :

• Sebelumnya teman-teman buat terlebih dahulu satubuah database dengan nama latihan
• Selanjutnya buat satu buah table dengan nama registrasi, dengan struktur fields seperti berikut :

• Jika sudah selanjutnya buat satu buah folder project didalam folder root webserver kalian dengan nama latihan, dan pada contoh disini saya mengguanakan apache xampp.
• Selanjutnya buat lagi satu buah file php dengan nama index.php didalam folder latihan tersebut
• Ketikan kode html form dibawah ini ke dalam filde index.php tersebut, berikut kodenya

<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="Submit">
            </div>
            </fieldset>
            </form>
            </div>
            </div>
</body>
</html>

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