Membuat Validasi Form Menggunakan Parsleys.js

Parsley.js library adalah sekumpulan library javascript sederhana dan ringan untuk dapat membuat validasi form. Parsley.js bisa kita gunakan gratis dengan cara versi online menggunakan link CDN atau mendowload filenya langsung disini. Dan pada kesempatan kali ini saya akan Membuat Valisai Form Menggunakan Parsleys.js.

Langkah pertama untuk Membuat Valisai Form Menggunakan Parsleys.js kita akan buat terlebih dahulu struktur html sebagai berikut.

<html> 

  <head> 

    <title>Membuat Valisai Form Menggunakan Parsleys.js</title> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <script src="http://parsleyjs.org/dist/parsley.js"></script>

<body> 

  <div class="container"> 

    <div class="table-responsive"> 

      <h3 align="center">Membuat Valisai Form Menggunakan Parsleys.js</h3>

      <div class="box">

       <form id="validate_form">

        <div class="form-group">

         <label>Nama Lengkap</label>

         <input type="text" name="first_name" id="first_name" placeholder="Nama Lengkap" required data-parsley-pattern="^[a-zA-Z]+$" data-parsley-trigger="keyup" class="form-control" />

        </div>

        <div class="form-group">

         <label for="email">Alamat Email</label>

         <input type="text" name="email" id="email" placeholder="Alamat Email" required data-parsley-type="email" data-parsley-trigger="keyup" class="form-control" />

        </div>

        <div class="form-group">

         <label for="password">Kata Sandi</label>

         <input type="password" name="password" id="password" placeholder="Kata Sandi" required data-parsley-length="[8, 16]" data-parsley-trigger="keyup" class="form-control" />

        </div>

        <div class="form-group">

         <label for="cpassword">Ulang Kata Sandi</label>

         <input type="password" name="confirm_password" id="confirm_password" placeholder="Ulang Kata Sandi" data-parsley-equalto="#password" data-parsley-trigger="keyup" required class="form-control" />

        </div>

        <div class="form-group">

         <label for="cpassword">Website</label>

         <input type="text" id="website" name="website" placeholder="Website URL" data-parsley-type="url" data-parsley-trigger="keyup" class="form-control" />

        </div>

        <div class="form-group">

         <div class="checkbox">

          <label><input type="checkbox" id="check_rules" name="check_rules" required /> I Accept the Terms & Conditions</label>

         </div>

        </div>

        <div class="form-group">

         <input type="submit" id="submit" name="submit" value="Submit" class="btn btn-success" />

        </div>

       </form>

      </div>

     </div> 

    </div>

  </body> 

</html> 

Jika teman-teman perhatikan untuk cara menggunakan parsleys.js disini teman-teman cukup memberikan attribute sebagai berikut :

  • data-parsley-pattern untuk mengatur karakter yang ada di tag input. Ex : huruf A-Z
  • data-parsley-type untuk mengatur tipe value di tag input. Ex : email/url
  • data-parsley-length untuk mengatur digit dari value input
  • data-parsley-equalto untuk melakukan pencocokan value dengan input lain
  • data-parsley-trigger untuk menjalankan validasi ketika melakukan event. Ex : keyup, facusin, facusout

Dan masih banyak lagi fungsi-fungsi lain yang dapat digunakan untuk membuat validasi. Langkah selanjutnya kita akan membuat style css untuk memberikan style error dan success pada parsleys.js sebagai berikut.

<style>

     .box

     {

      width:100%;

      max-width:600px;

      background-color:#f9f9f9;

      border:1px solid #ccc;

      border-radius:5px;

      padding:16px;

      margin:0 auto;

     }

     input.parsley-success,

     select.parsley-success,

     textarea.parsley-success {

       color: #468847;

       background-color: #DFF0D8;

       border: 1px solid #D6E9C6;

     }

 

     input.parsley-error,

     select.parsley-error,

     textarea.parsley-error {

       color: #B94A48;

       background-color: #F2DEDE;

       border: 1px solid #EED3D7;

     }

 

     .parsley-errors-list {

       margin: 2px 0 3px;

       padding: 0;

       list-style-type: none;

       font-size: 0.9em;

       line-height: 0.9em;

       opacity: 0;

 

       transition: all .3s ease-in;

       -o-transition: all .3s ease-in;

       -moz-transition: all .3s ease-in;

       -webkit-transition: all .3s ease-in;

     }

 

     .parsley-errors-list.filled {

       opacity: 1;

     }

    

     .parsley-type, .parsley-required, .parsley-equalto{

      color:#ff0000;

     }

    

    </style>

Langkah selanjutnya teman-teman buat script ajax untuk melakukan passing data agar data berhasil disimpan.

$(document).ready(function(){ 

    $('#validate_form').parsley();

    $('#validate_form').on('submit', function(event){

      event.preventDefault();

      if($('#validate_form').parsley().isValid()){

       $.ajax({

        url:"action.php",

        method:"POST",

        data:$(this).serialize(),

        beforeSend:function(){

         $('#submit').attr('disabled','disabled');

         $('#submit').val('Submitting...');

        },

        success:function(data)

        {

         $('#validate_form')[0].reset();

         $('#validate_form').parsley().reset();

         $('#submit').attr('disabled',false);

         $('#submit').val('Submit');

         alert(data);

        }

       });

      }

    });

}); 

</script>

Dan langkah terakhir buat file baru dengan nama action.php untuk melakukan proses simpan ke database.

<?php

sleep(5);

 

if(isset($_POST['nama'])){

 $connect = new PDO("mysql:host=localhost;dbname=test", "dumet", "school");

 $data = array(

  ':nama'  => $_POST['nama'],

  ':email'   => $_POST['email'],

  ':password'   => $_POST['password'],

  ':website'   => $_POST['website']

 );

 

 $query = "

 INSERT INTO data_registrasi

 (nama, email, password, website)

 VALUES (:nama, :email, :password, :website)

 ";

 $statement = $connect->prepare($query);

 if($statement->execute($data)){

  echo 'Registrasi sudah berhasil !';

 }

}

?>

Jika dilihat di halaman browser maka tampil seperti pada gambar di bawah ini.

Membuat Validasi Form Menggunakan Parsleys.js

Demikian artikel kali ini tentang Membuat Validasi Form Menggunakan Parsleys.js. Semoga bermanfaat dan selamat mencoba.

18 April 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat