Membuat validasi form menggunakan Parsley.js

Halo semua, hari ini di tutorial ini kita akan melihat Cara Memvalidasi Form Pendaftaran menggunakan Parsley.JS, Parsley adalah library JavaScript untuk validasi form. Baik ada banyak cara yang dapat kita lakukan untuk memvalidasi form web menggunakan server-side atau client-side dengan membuat kode kustom server-side/client-side yang dapat berupa JavaScript atau PHP, atau dapat juga dilakukan dengan menggunakan beberapa Plugins/Library validasi jQuery, diantara saya telah menemukan Parsley yang banyak digunakan di sebagian besar template admin bootstrap yang telah saya lihat, jadi mari kita lihat bagaimana cara menggunakannya, kamu dapat melihat demonya dari link dibawah sebelum melanjutkan.

Parsley.Js

Pertama-tama, biar saya jelaskan mengenai Parsley, ini adalah library validasi yang berisi berbagai macam jenis validasi yang biasanya kita butuhkan dan dilengkapi dengan ukuran yang sangat ringan, dan untuk validasi menggunakan API DOM tertentu itu menggunakan data-attribute , sehingga kita tidak perlu menulis kode JavaScript lagi, singkatnya kita dapat mengatakan bahwa itu adalah, sebuah library yang sangat ringan dan kaya fitur.

DOM API Parsley default nya adalah data-parsley-. dan kita hanya perlu menggunakan property tersebut, property disini maksudnya email, nomor, tanggal, angka dll, jika kita ingin memvalidasi input email, kita hanya perlu menambahkan data-attribute: data-peterseli-type="email" di dalam element input yang sama, itu saja.

Membuat validasi form menggunakan Parsley.js

Sekarang mari kita mulai, Cara menggunakan library validasi ini di proyek web kamu untuk itu kamu hanya perlu men-download file dari halaman Download Parsley dan download yang versi terbaru, disini saya menggunakan versi 2.6.2. atau jika kamu sudah menggunakan versi sebelumnya jangan lupa untuk meng-upgrade dengan yang versi terbaru.

Setelah men-download file kamu hanya perlu menambahkannya ke dalam file/halaman di mana kamu ingin memvalidasi form, tapi ingat, kamu harus menyertakan file jQuery sebelum memasukkan file Parsley seperti ini:

Catatan: saya menempatkan file Parsley di direktori parsleyjs/dist/. parsley.min.js maksudnya saya pakai Parsley yang sudah di-Minify. Silahkan cari tahu apa itu minify di google 🙂

<script src="jquery.js"></script>
<script src="parsleyjs/dist/parsley.min.js"></script>

Saya juga menambahkan bahasa Indonesia untuk pesan error nya dengan menambahkan baris kode seperti ini setelah Pasrley:

<script src="parsleyjs/dist/i18n/id.js"></script>

Ada dua cara di mana kamu dapat menggunakan Parsley, yang pertama adalah dengan menggunakan attribute data-parsley-validate di tag form dan cara yang lain dengan menggunakan kode javascript $('form').parsley();

Cara pertama – Dasar

<form data-parsley-validate>
<!-- form input ditempatkan di sini -->
</form>

<script src="jquery.js"></script>
<script src="parsleyjs/dist/parsley.min.js"></script>
<script src="parsleyjs/dist/i18n/id.js"></script>

Cara kedua – Javascript

<form>
<!-- form input ditempatkan di sini -->
</form>

<script src="jquery.js"></script>
<script src="parsleyjs/dist/parsley.min.js"></script>
<script src="parsleyjs/dist/i18n/id.js"></script>

<script type="text/javascript">
  $('#regform').parsley();
</script>

Seperti yang saya katakan, itu menggunakan data-atributte sehingga kamu hanya perlu menambahkan built-in data-attributes Parsley dalam field input yang ingin divalidasi.

Sekarang mari kita buat contoh form pendaftaran, saya disini menggunakan bootstrap untuk mendesain form.

<form method="post" class="form-horizontal">
     
 <div class="form-group">
 <label class="col-sm-3 control-label">Huruf</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-pattern="^[a-zA-Z ]+$" placeholder="Ketik apa saja" />
 </div>
 </div>
               
 <div class="form-group">
 <label class="col-sm-3 control-label">Password</label>
 <div class="col-sm-3">
 <input type="password" id="pass2" class="form-control" required data-parsley-length="[6, 10]" data-parsley-trigger="keyup" placeholder="Password" />			</div>
 <div class="col-sm-3">
 <input type="password" class="form-control" required data-parsley-equalto="#pass2" data-parsley-trigger="keyup" placeholder="Ketik ulang Password" />				</div>
    </div>
        
 <div class="form-group">
 <label class="col-sm-3 control-label">E-Mail</label>
 <div class="col-sm-6">
 <input type="email" class="form-control" required data-parsley-type="email" data-parsley-trigger="keyup" placeholder="Masukkan e-mail yang valid" />				</div>
 </div>
 
 <div class="form-group">
 <label class="col-sm-3 control-label">URL</label>
 <div class="col-sm-6">
 <input type="url" class="form-control" required data-parsley-type="url" placeholder="URL" />
 </div>
 </div>
 
 <div class="form-group">
 <label class="col-sm-3 control-label">Angka</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="number" placeholder="Masukkan hanya angka" />
 </div>
 </div>
 
 <div class="form-group">
 <label class="col-sm-3 control-label">Alfanumerik</label>
 <div class="col-sm-6">
 <input type="text" class="form-control" required data-parsley-type="alphanum" placeholder="Masukkan nilai alfanumerik" />
 </div>
 </div>
 
 <div class="form-group">
 <label class="col-sm-3 control-label">Pilih</label>
 <div class="col-sm-6">
 <select class="form-control" required>
  <option value="" selected="selected"> - Pilih - </option>
  <option>n1</option>
  <option>n2</option>
  <option>n3</option>
  <option>n4</option>
 </select>
 </div>
 </div>
 
 <div class="form-group">
 <label class="col-sm-3 control-label">Pesan</label>
 <div class="col-sm-6">
 <textarea required class="form-control"></textarea>
 </div>
 </div>
 
 <div class="form-group">
 <div class="col-sm-offset-3 col-sm-9 m-t-15">
 <button type="submit" class="btn btn-primary">Submit</button>
 <button type="reset" class="btn btn-default m-l-5">Batal</button>
 </div>
 </div>
     
</form>

Tambahkan Parsley – Javascript

<script src="jquery.js"></script>

<script src="parsleyjs/dist/parsley.min.js"></script>
<script src="parsleyjs/dist/i18n/id.js"></script>
 
<script>
$(document).ready(function(){
 $('form').parsley();
});
</script>

Form yang tervalidasi akan terlihat seperti ini (dengan bootstrap):

Sebenarnya ada juga file parsley.css yang tersedia untuk mendesain pesan error ketika kamu mendownload Parsley, tetapi saya di sini menggunakan bootstrap untuk mendesain pesan error pada form,jadi saya membuat file parsleyjs/dist/error.css untuk mendesain pesan error yang lebih enak dipandang.

input.parsley-error,
select.parsley-error,
textarea.parsley-error {    
    border-color:#843534;
    box-shadow: none;
}

input.parsley-error:focus,
select.parsley-error:focus,
textarea.parsley-error:focus {    
    border-color:#843534;
    box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 6px #ce8483
}

Ada banyak built-in validator (API), tetapi yang saya gunakan di sini adlah API yang umum dan biasa yang kita butuhkan pada umumnya dalam form ini, dan sesuai form di atas yang saya gunakan, mari saya jelaskan satu per satu:

required adalah atribut HTML5 umum yang memaksa pengguna untuk mengisi input form, tetapi menggunakan atribut required itu tidak wajib, dan Parsley juga bekerja sangat baik dengan atribut required, sedangkan parsley memiliki API data-parsley-required untuk hal yang sama.

Jadi, itulah validator parsley yang telah saya gunakan dalam form di atas, meskipun ada banyak validator yang tersedia yang dapat kamu gunakan sebagai kebutuhan kamu. Silahkan baca-baca di dokumentasi situs resminya untuk lebih lanjutnya.

Itu saja ya, saya harap kalian menyukai tutorial ini dan jangan lupa untuk berbagi. Kalau ada masalah apapun dengan kode, jangan ragu untuk bertanya di kolom komentar.