Membuat validasi form menggunakan Parsley.js

4
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):

Form yang tervalidasi menggunakan parsley

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.

Atribut Parsley (API) Deskripsi
data-parsley-required Yang membuat input form wajib diisi.
data-parsley-pattern="^[a-zA-Z ]+$" Hanya menerima huruf dengan spasi.
data-parsley-length="[6, 10]" Ini menentukan panjang string, harus dalam 6-10
data-parsley-trigger="keyup" Akan muncul pesan error langsung sebelum form disubmit
data-parsley-equalto="#pass2" Mencocokan nilai dua bidang apakah sama atau tidak dengan menetapkan id
data-parsley-type="email" mengecek nilai yang dimasukkan adalah email yang valid atau tidak
data-parsley-type="number" Hanya menerima angka
data-parsley-type="alphanum" Hanya menerima Alfanumerik

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.

Pecandu Aceh Gayo dan 182. Follow Instagram ↓↓↓
BAGIKAN

Leave a Reply

4 Komentar di "Membuat validasi form menggunakan Parsley.js"

Beritahu
avatar
400
Urut berdasarkan:   terbaru | terlama | vote teratas
yusuf
Tamu

terimakasih atas tutorialnya gan, tp setelah sy custom (coba brackdown satu persatu) dan hanya menggunakan id.js dan error.css sudah bisa buat validasi ya ?
mangsud saya adalah, apakah sy adalah apabila sy mengcustom versi sy tsb tanpa memasukan parsleyjs apakah sudah cukup?ato wajib dg parsleyjs, mengingat itu sj sudah fungsi. terima kasih

yusuf
Tamu

ehhh..nga deng kang, maaf saya salah. ada link parsley yg kelewat sy hps.hehehe..thanks ya

yusuf
Tamu

Mas,,kenapa kalo input group (bootstrap dengan font awesome di depannya) pas error validasi, tampilan nga sesuai y/tidak dibawah input group. contoh spt ini: https://stackoverflow.com/questions/42720914/parsley-validate-issue-with-input-addon-bootstrap-ui . terima kasih