Pada tutorial kali ini, saya akan mencoba membuat sebuah form inputan dengan validasi menggunakan jquery, style bootstrap dan sweet alert sebagai pemanisnya.
<h3>PERSIAPAN</h3>
dalam tutorial ini kita menggunakan bootstrap, sweetalert, dan jquery. Untuk filenya silahkan download terlebih dahulu disini: <a href="http://getbootstrap.com/getting-started/#download">Bootstrap</a>, <a href="https://jquery.com">Jquery</a>, dan <a href="https://github.com/t4t5/sweetalert/archive/master.zip">Sweet Alert</a>. Bagi teman-teman yang ingin baca-baca mengenai ketiga hal tersebut silahkan kunjungi link ini : <a href="https://www.codepolitan.com/?s=bootstrap">Bootstrap</a>, <a href="https://jquery.com">Jquery</a>, dan <a href="https://www.codepolitan.com/mempercantik-alert-javascript-dengan-sweet-alert?utm_source=codepolitan&amp;utm_medium=new_article&amp;utm_campaign=home_loop">Sweet Alert.</a>

Nah setelah semua file sudah didownload langkah berikutnya yaitu:
<ol>
 	<li>buat folder dengan nama "form" tanpa petik di dalam folder htdocs masing-masing.</li>
 	<li>extract bootstrap yang sudah di download kemudian pindahkan hasil extract ke folder “form” tadi. Kemudian rename menjadi “assets”.</li>
 	<li>di dalam folder assets buat folder “sweetalert” kemudian extract hasil download Sweet Alert dan letakkan di folder ini.</li>
 	<li>kemudian pindahkan jquery-3.1.1.min.js yang sudah didownload (saya menggunakan versi 3.1.1) ke dalam "htdocs/form/assets/js".</li>
 	<li>buat database "db_inputan" (saya menggunakan mysql).
<pre>create database db_inputan;</pre>
<pre>use db_inputan;</pre>
</li>
 	<li>buat tabel "orang".
<pre>create table orang
(id int not null auto_increment, 
nama varchar(30) not null, tgl_lahir
varchar(10) not null, email varchar(30)
not null, password varchar(35)
not null, no_hp varchar(13)
not null, constraint pk_orang
primary key(id));</pre>
</li>
</ol>
<h3>Aturan Validasi</h3>
<ol>
 	<li>Nama tidak boleh mengandung angka, panjang maksimal 30 karakter.</li>
 	<li>Format tanggal lahir dd/mm/yyyy atau dd-mm-yyyy.</li>
 	<li>Format e-mail yang diperbolehkan ex: aaaa@yahoo.com, panjang maksimal 30 karakter, dan e-mail belum digunakan.</li>
 	<li>Password min 8 karakter dan maksimal 35 karakter.</li>
 	<li>Konfirmasi password harus sama dengan password.</li>
 	<li>Semua Text Box wajib diisi.</li>
</ol>
<h3>Pembuatan Kode</h3>
Disini kita akan membuat 5 file, yaitu:
<ol>
 	<li>"input.php", file ini adalah inti dari tutorial ini.</li>
 	<li>"checkemail.php", kode di dalam file ini akan digunakan saat validasi email (apakah sudah digunakan atau belum). pemrosesan dilakukan menggunakan ajax.</li>
 	<li>"simpan.php", file ini berisi kode untuk proses simpan. ini juga akan di proses menggunakan ajax yang dieksekusi setelah tombol konfirmasi sweetalert ditekan.</li>
 	<li>"koneksi.php", untuk koneksi ke database.</li>
 	<li>"tampil.php", setelah proses simpan berhasil maka akan di direct ke halaman ini.</li>
</ol>
Semua file diatas disimpan di htdocs/form.
<h2>Pembuatan File "input.php"</h2>
Isi dari file ini ada dua bagian yaitu bagian HTML dan Java Script. Buat file baru dengan nama "input.php" tanpa petik. letakan di htdocs/form.

Bagian HTML:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;Form Pendaftaran&lt;/title&gt;
	&lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"&gt;
	&lt;script type="text/javascript" src="assets/js/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
	&lt;link rel="stylesheet" type="text/css" href="assets/sweetalert/sweetalert.css"&gt;
        &lt;script type="text/javascript" src="assets/sweetalert/sweetalert.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="container"&gt;
	&lt;div class="col-lg-4 col-lg-offset-4 col-sm-6 col-sm-offset-2"&gt;
		&lt;h1 style="text-align: center;"&gt;Form Inputan&lt;/h1&gt;
		&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
		&lt;div class="thumbnail"&gt;
			&lt;form role="form" id="formInput"&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="nama"&gt;Nama&lt;/label&gt;
 &lt;input type="text" name="nama" id="nama" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="tgl_lahir"&gt;Tanggal Lahir&lt;/label&gt;
 &lt;input type="text" name="tgl_lahir" id="tgl_lahir" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="email"&gt;E-mail&lt;/label&gt;
 &lt;input type="text" name="email" id="email" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="password"&gt;Password&lt;/label&gt;
 &lt;input type="password" name="password" id="password" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="password"&gt;Konfirmasi Password&lt;/label&gt;
 &lt;input type="password" name="conf_password" id="conf_password" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;div class="form-group form-group-lg has-feedback"&gt;
 &lt;label for="hp"&gt;Nomer HP&lt;/label&gt;
 &lt;input type="text" name="hp" id="hp" class="form-control textbox"&gt;
 &lt;i class="form-control-feedback"&gt;&lt;/i&gt;
 &lt;span class="text-warning" &gt;&lt;/span&gt;
 &lt;/div&gt;

&lt;button type="submit" name="btn-simpan" class="btn btn-primary btn-block"&gt;Simpan&lt;/button&gt;

&lt;/form&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</pre>
Untuk Bagian Java Scriptnya (sisipkan pada bagian HTML bisa diantara tag &lt;head&gt;&lt;/head&gt; atau sebelum tag pentup html &lt;/html&gt;). untuk memudahkan, penjelasan ada di komentar kode:
<pre>&lt;script type="text/javascript"&gt;
	$(document).ready(function(){
		//semua element dengan class text-warning akan di sembunyikan saat load
		$('.text-warning').hide();
		//untuk mengecek bahwa semua textbox tidak boleh kosong
		$('input').each(function(){ 
			$(this).blur(function(){ //blur function itu dijalankan saat element kehilangan fokus
				if (! $(this).val()){ //this mengacu pada text box yang sedang fokus
					return get_error_text(this); //function get_error_text ada di bawah
				} else {
					$(this).removeClass('no-valid'); 
					$(this).parent().find('.text-warning').hide();//cari element dengan class has-warning dari element induk text yang sedang focus
					$(this).closest('div').removeClass('has-warning');
					$(this).closest('div').addClass('has-success');
					$(this).parent().find('.form-control-feedback').removeClass('glyphicon glyphicon-warning-sign');
					$(this).parent().find('.form-control-feedback').addClass('glyphicon glyphicon-ok');
				}
			});
		});
		//mengecek textbox Nama Valid Atau Tidak
		$('#nama').blur(function(){
			var nama= $(this).val();
			var len= nama.length;
			if(len&gt;0){ //jika ada isinya
				if(!valid_nama(nama)){ //jika nama tidak valid
					$(this).parent().find('.text-warning').text("");
					$(this).parent().find('.text-warning').text("Nama Tidak Valid");
					return apply_feedback_error(this);
				} else {
					if (len&gt;30){ //jika karakter &gt;30
						$(this).parent().find('.text-warning').text("");
						$(this).parent().find('.text-warning').text("Maximal Karakter 30");
						return apply_feedback_error(this);
					}
				}
			} 
		});
		//Mengecek textbox tanggal lahir
		$('#tgl_lahir').blur(function(){
			var tgl= $(this).val();
			var len= tgl.length;
			if(len&gt;0){
				if(!valid_tanggal(tgl)){
					$(this).parent().find('.text-warning').text("");
					$(this).parent().find('.text-warning').text("Format Tanggal yang diperbolehkan mm-dd-yyy, mm/dd/yyyy atau dd/mm/yyyy, dd-mm-yyyy");
					return apply_feedback_error(this);
				}
			}
		});
		//mengecek text box email
		$('#email').blur(function(){
			var email= $(this).val();
			var len= email.length;
			if(len&gt;0){ 
				if(!valid_email(email)){ 
					$(this).parent().find('.text-warning').text("");
					$(this).parent().find('.text-warning').text("E-mail Tidak Valid (ex: aaaa@yahoo.co.id)");
					return apply_feedback_error(this);
				} else {
					if (len&gt;30){ 
						$(this).parent().find('.text-warning').text("");
						$(this).parent().find('.text-warning').text("Maximal Karakter 30");
						return apply_feedback_error(this);
					} else {
						var valid = false;
						$.ajax({
		                                   url: "checkemail.php",
		                                   type: "POST",
		                                   data: "email="+email,
		                                   dataType: "text",
		                                   success: function(data){
		                    	                     if (data==0){ //pada file check email.php, apabila email sudah ada di database makan akan mengembalikan nilai 0
		                    		             $('#email').parent().find('.text-warning').text("");
							     $('#email').parent().find('.text-warning').text("email sudah ada");
							     return apply_feedback_error('#email');
		                    	                     }
			                                           }
							});
						}
				}
			} 
		});
		//mengecek password
		$('#password').blur(function(){
			var password=$(this).val();
			var len=password.length;
			if (len&gt;0 &amp;&amp; len&lt;8) {
				$(this).parent().find('.text-warning').text("");
				$(this).parent().find('.text-warning').text("password minimal 8 karakter");
				return apply_feedback_error(this);
			} else {
				if(len&gt;35) {
					$(this).parent().find('.text-warning').text("");
					$(this).parent().find('.text-warning').text("password maximal 35 karakter");
					return apply_feedback_error(this);
				}
			}
		});
		//mengecek konfirmasi password
		$('#conf_password').blur(function(){
			var pass = $("#password").val();
			var conf=$(this).val();
			var len=conf.length;
			if (len&gt;0 &amp;&amp; pass!==conf) {
				$(this).parent().find('.text-warning').text("");
				$(this).parent().find('.text-warning').text("Konfirmasi Password tidak sama dengan password");
				return apply_feedback_error(this);
			}
		});

		//mengecek nomer hp
		$('#hp').blur(function(){
			var hp=$(this).val();
			var len=hp.length;
			if (len&gt;0 &amp;&amp; len&lt;=10){
				$(this).parent().find('.text-warning').text("");
				$(this).parent().find('.text-warning').text("Nomer HP terlalu pendek");
				return apply_feedback_error(this);
			} else {
				if(!valid_hp(hp)){
					$(this).parent().find('.text-warning').text("");
					$(this).parent().find('.text-warning').text("Format nomer hp tidak sah.(ex: +6285736262623)");
					return apply_feedback_error(this);
				} else {
					if (len &gt;13){
						$(this).parent().find('.text-warning').text("");
						$(this).parent().find('.text-warning').text("Nomer HP terlalu Panjang");
						return apply_feedback_error(this);
					}
				}
			}
		});

		//submit form validasi
		$('#formInput').submit(function(e){
			e.preventDefault();
			var valid=true;		
			$(this).find('.textbox').each(function(){
				if (! $(this).val()){
					get_error_text(this);
					valid = false;
					$('html,body').animate({scrollTop: 0},"slow");
				} 
				if ($(this).hasClass('no-valid')){
					valid = false;
					$('html,body').animate({scrollTop: 0},"slow");
				}
			});
			if (valid){
				swal({
	                          title: "Konfirmasi Simpan Data",
	                          text: "Data Akan di Simpan Ke Database",
	                          type: "info",
	                          showCancelButton: true,
	                          confirmButtonColor: "#1da1f2",
	                          confirmButtonText: "Yakin, dong!",
	                          closeOnConfirm: false,
	                          showLoaderOnConfirm: true,
          				}, function () { //apabila sweet alert d confirm maka akan mengirim data ke simpan.php melalui proses ajax
		                $.ajax({
		                    url: "simpan.php",
		                    type: "POST",
		                    data: $('#formInput').serialize(), //serialize() untuk mengambil semua data di dalam form
		                    dataType: "html",
		                    success: function(){                
	                            setTimeout(function(){
	                              swal({
	                              	title:"Data Berhasil Disimpan",
	                              	text: "Terimakasih",
	                              	type: "success"
	                              }, function(){
	                              	window.location="tampil.php";
	                              });
	                            }, 2000);
                            },
                    		error: function (xhr, ajaxOptions, thrownError) {
                        		setTimeout(function(){
                            		swal("Error", "Tolong Cek Koneksi Lalu Ulangi", "error");
                            	}, 2000);}
				});
           		});
	  		}
		});
	});

	//fungsi cek nama
	function valid_nama(nama) {
		var pola= new RegExp(/^[a-z A-Z]+$/);
		return pola.test(nama);
	}
	//fungsi cek tanggal lahir
	function valid_tanggal(tanggal){
		var pola= new RegExp(/\b\d{1,2}[\/-]\d{1,2}[\/-]\d{4}\b/);
		return pola.test(tanggal);
	}
	//fungsi cek email
	function valid_email(email){
		var pola= new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
		return pola.test(email);
	}
	//fungsi cek phone 
	function valid_hp(hp){
		var pola = new RegExp(/^[0-9-+]+$/);
		return pola.test(hp);
	}
	//menerapkan gaya validasi form bootstrap saat terjadi eror
	function apply_feedback_error(textbox){
		$(textbox).addClass('no-valid'); //menambah class no valid
		$(textbox).parent().find('.text-warning').show();
		$(textbox).closest('div').removeClass('has-success');
		$(textbox).closest('div').addClass('has-warning');
		$(textbox).parent().find('.form-control-feedback').removeClass('glyphicon glyphicon-ok');
		$(textbox).parent().find('.form-control-feedback').addClass('glyphicon glyphicon-warning-sign');
	}

	//untuk mendapat eror teks saat textbox kosong, digunakan saat submit form dan blur fungsi
	function get_error_text(textbox){
		$(textbox).parent().find('.text-warning').text("");
		$(textbox).parent().find('.text-warning').text("Text Box Ini Tidak Boleh Kosong");
		return apply_feedback_error(textbox);
	}
&lt;/script&gt;</pre>
<h2>Pembuatan File "checkemail.php"</h2>
Guna dari isi file ini adalah untuk mengecek email sudah dipakai atau belum. Buat file baru simpan dengan nama "checkmail.php" tanpa petik, kemudian simpan di htdocs/form.

isi dari "checkmail.php" adalah sebagai berikut:
<pre>&lt;?php
require 'koneksi.php';
$email = $_POST['email'];
$sql = "select * from orang where email='$email'";
$hasil = mysqli_query($conn, $sql);
$num = mysqli_num_rows($hasil);
if ($num&gt;0){
	echo 0;
} else {
	echo 1;
}</pre>
<h3>Pembuatan File "koneksi.php"</h3>
Guna dari isi file ini adalah untuk koneksi ke database. Buat file baru simpan dengan nama "koneksi.php" tanpa petik, kemudian simpan di htdocs/form.

isi dari "koneksi.php" adalah sebagai berikut:
<pre>&lt;?php
$conn=mysqli_connect('localhost','root','','db_inputan'); //mysqli_connect('host', 'user', 'password', 'database')</pre>
<h3>Pembuatan File "simpan.php"</h3>
Guna dari isi file ini adalah untuk menyimpan data yang telah diinputkan ke database. Buat file baru simpan dengan nama "simpan.php" tanpa petik, kemudian simpan di htdocs/form.

isi dari "simpan.php" adalah sebagai berikut:
<pre>&lt;?php
require 'koneksi.php';
$nama = $_POST['nama'];
$tgl_lahir = $_POST['tgl_lahir'];
$email = $_POST['email'];
$password = $_POST['password'];
$hp = $_POST['hp'];
$sql = "insert into orang values('','$nama','$tgl_lahir','$email','$password','$hp')";
mysqli_query($conn, $sql);</pre>
<h3>Pembuatan File "tampil.php"</h3>
Gunanya untuk menampilkan data yang sudah diinputkan. Buat file baru simpan dengan nama "tampil.php" tanpa petik, kemudian simpan di htdocs/form.

isi dari "tampil.php" adalah sebagai berikut:
<pre>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;title&gt;DATA INPUTAN&lt;/title&gt;
	&lt;link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;div class="container"&gt;
		&lt;table class="table table-striped"&gt;
			&lt;tr&gt;
				&lt;th&gt;Nama&lt;/th&gt;
				&lt;th&gt;Tanggal Lahir&lt;/th&gt;
				&lt;th&gt;Email&lt;/th&gt;
				&lt;th&gt;Nomer HP&lt;/th&gt;
			&lt;/tr&gt;
			&lt;?php
			require 'koneksi.php';
			$sql = "select * from orang";
			$result = mysqli_query($conn, $sql);
			if ($result) {
				while ($row = mysqli_fetch_row($result)) {
					$nama = $row[1];
					$tgl_lahir = $row[2];
					$email = $row[3];
					$hp = $row[5];
					?&gt;
					&lt;tr&gt;
					&lt;td&gt;&lt;?php echo $nama ?&gt;&lt;/td&gt;
					&lt;td&gt;&lt;?php echo $tgl_lahir ?&gt;&lt;/td&gt;
					&lt;td&gt;&lt;?php echo $email ?&gt;&lt;/td&gt;
					&lt;td&gt;&lt;?php echo $hp ?&gt;&lt;/td&gt;
					&lt;/tr&gt; &lt;?php
				}
				mysqli_free_result($result);
			?&gt;

		&lt;/table&gt;
		&lt;a href="input.php" class="btn btn-danger"&gt;Input Lagi&lt;/a&gt;
		&lt;?php
		}
			?&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
Untuk mencobanya silahkan buka web browser teman-teman kemudian ketikan "localhost/form/input.php" tanpa petik.

Sekian tutorial pembuatan form input dari saya. maaf apabila masih berantakan.

Semoga bermanfaat! Terimakasih, dan selamat mencoba !

<div class="margin-md-top" style="background: beige; padding: 6px 20px;">

Tutorial ini ditujukan untuk kompetisi kontes <a href="https://www.codepolitan.com/ikuti-kompetisi-menulis-tutorial-dan-menangkan-hadiah-beasiswa" target="_blank">Menulis Tutorial</a> oleh:

<a href="https://goo.gl/5M61a4?utm_source=codepolitan" target="_blank"><img src="https://wordpress.codepolitan.com/wp-content/uploads/2016/10/logo-hacktiv8.png" width="150" /></a>

</div>

Membuat Form Input dengan Validasi Jquery, Style Bootstrap, dan Sweet Alert sebagai Pemanisnya

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Membuat Form Input dengan Validasi Jquery, Style Bootstrap, dan Sweet Alert sebagai Pemanisnya

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Membuat Form Input dengan Validasi Jquery, Style Bootstrap, dan Sweet Alert sebagai Pemanisnya

Explore Roles

Explore Generative AI

Explore Cybersecurity

Explore Technologies

Explore Skill Assessments

Learning

KelasFullstack

RuangAI

JagoanSiber

Membuat Form Input dengan Validasi Jquery, Style Bootstrap, dan Sweet Alert sebagai Pemanisnya

Baca Artikel Lainnya

Membuat Form Input dengan Validasi Jquery, Style Bootstrap, dan Sweet Alert sebagai Pemanisnya