Cara Membuat Form Validasi dengan Plugin jQuery formValidation

Cara Membuat Form Validasi dengan Plugin jQuery formValidation

18:11
 
Cara Membuat Form Validasi dengan Plugin jQuery formValidation - Salam sejahtera buat teman-teman semua. Sudah lama saya tidak memposting artikel, dikarenakan kesibukan sehari-hari :D. Oke, pada postingan kali ini saya akan share Cara Membuat Form Validasi dengan Plugin jQuery formValidation.  Apakah anda pernah membuat website dengan adanya Form.? Saya yakin ada, baik itu form login, register, buku tamu, atau form lainnya. Terkadang ada beberapa user yang mengisi inputan form secara asal-asalan, tidak sesuai yang web anda inginkan. Dan terkadang ada juga yang mengisinya kosong. Nah, plugin ini sangat berperan pada kondisi anda tersebut. Dan plugin ini dapat mengatasi masalah anda tadi.
Plugin formValidation ini sangat bagus dan sudah terintegrasi dengan Framework Bootstrap, jadi selain penggunaannya yang mudah, plugin ini memiliki tampilan yang bagus. Oke, langsung saja kita buat. Hal yang pertama kita lakukan, yang menginstall beberapa bagian, seperti bootstrap, jQuery dan plugin formValidation. Buat file html baru dengan nama form-validasi.html. Dan buat script dibawah diantara <head>...</head>, untuk tahap tidak panjang lebar, karna saya yakin anda sudah paham dengan struktur HTML.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>

Nah, ketika kita sudah menginstall beberapa bagian yang kita butuhkan, sekarang kita lanjutkan dengan membuat form dengan tampilan bootstrap. Berikut scriptnya.
<form id="formContoh">
                <div class="form-group">
                    <label>Username</label>
                    <input type="text" name="username" id="username" placeholder="Username" class="form-control" minlength="4" data-fv-stringlength-message="Username harus lebih dari 5 Karakter">
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input type="password" name="password" id="password" placeholder="Password" class="form-control">
                </div>
                <div class="form-group">
                    <label>Confirm Password</label>
                    <input type="password" name="repassword" placeholder="Password" class="form-control">
                </div>
                <div class="form-group">
                    <label>Email</label>
                    <input type="text" name="emailUser" id="emailUser" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="Submit">
                </div>
            </form> 
Bagaimana gan.? apa yang terjadi.? Yapz, tampilan saat ini hanya muncul sebuah form yang sederhana saja. Masih berantakan, dikarenakan ada beberapa bagian yang belum kita buat. Selanjutnya kita akan buat script jQuerynya ya.!! Terapkan saja script dibawah ini.
<script type="text/javascript">
$(document).ready (function() {
    $('#formContoh').formValidation({
        framework: 'bootstrap',
        excluded: 'disabled',

        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'Username Tidak Boleh Kosong'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'Password Tidak Boleh Kosong'
                    },
                    identical: {
                        field: 'repassword',
                        message: 'Password Tidak sama'
                    }                   
                }
            },
            repassword: {
                validators: {
                    notEmpty: {
                        message: 'Confirm Password Tidak Sama'
                    },
                    identical: {
                        field: 'password',
                        message: 'Password Tidak sama'
                    }                   
                }
            },
            emailUser: {
                validators: {
                    notEmpty: {
                        message: 'Email Tidak Boleh Kosong'
                    },
                    emailAddress: {
                        message: 'Email Tidak Valid'
                    }
                }
            }
        }
    })
});
</script>
 $('#formContoh') adalah id form yang kita buat tadi, dan username, password, repassword dan emailUser merupakan name yang kita berikan tiap inputnya. Untuk melihat script seluruhnya, ada dibawah ya.
<!DOCTYPE html>
<html>
<head>
 <title>Belajar Validasi</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
    <script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
 <div class="row">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- Labz -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-5604714187349049"
       data-ad-slot="6910422014"
       data-ad-format="auto"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
 </div>
 <div class="page-header row" style="border:none;">
  <div class="col-md-5">
   <form id="formContoh">
    <div class="form-group">
     <label>Username</label>
     <input type="text" name="username" id="username" placeholder="Username" class="form-control" minlength="4" data-fv-stringlength-message="Username harus lebih dari 5 Karakter">
    </div>
    <div class="form-group">
     <label>Password</label>
     <input type="password" name="password" id="password" placeholder="Password" class="form-control">
    </div>
    <div class="form-group">
     <label>Confirm Password</label>
     <input type="password" name="repassword" placeholder="Password" class="form-control">
    </div>
    <div class="form-group">
     <label>Email</label>
     <input type="text" name="emailUser" id="emailUser" placeholder="Email" class="form-control">
    </div>
    <div class="form-group">
     <input type="submit" class="btn btn-primary" value="Submit">
    </div>
   </form>
  </div>
 </div>
 <div class="row">
  <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <!-- Labz -->
  <ins class="adsbygoogle"
       style="display:block"
       data-ad-client="ca-pub-5604714187349049"
       data-ad-slot="6910422014"
       data-ad-format="auto"></ins>
  <script>
  (adsbygoogle = window.adsbygoogle || []).push({});
  </script>
 </div>
</div>

<script type="text/javascript">
$(document).ready (function() {
 $('#formContoh').formValidation({
  framework: 'bootstrap',
  excluded: 'disabled',

  icon: {
   valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
  },
  fields: {
   username: {
    validators: {
     notEmpty: {
      message: 'Username Tidak Boleh Kosong'
     }
    }
   },
   password: {
    validators: {
     notEmpty: {
      message: 'Password Tidak Boleh Kosong'
     },
     identical: {
      field: 'repassword',
      message: 'Password Tidak sama'
     }     
    }
   },
   repassword: {
    validators: {
     notEmpty: {
      message: 'Confirm Password Tidak Sama'
     },
     identical: {
      field: 'password',
      message: 'Password Tidak sama'
     }     
    }
   },
   emailUser: {
    validators: {
     notEmpty: {
      message: 'Email Tidak Boleh Kosong'
     },
     emailAddress: {
      message: 'Email Tidak Valid'
     }
    }
   }
  }
 })
});
</script>

</body>
</html>


Bagaimana gan.? Sudah rapi dan berjalan lancarkan.? Anda dapat memodifikasinya sesuai dengan keinginan anda. Dapat dilihat selengkapnya di formValidation. Semoga tutorial Cara Membuat Form Validasi dengan Plugin jQuery formValidation dapat bermanfaat untuk anda. Jika ada pertanyaaan, boleh berkomentar dibawah, atau ada masukan dan saran. Sekian dan terima kasih.

About

Perkenalkan saya blogger pemula, yang ingin belajar lebih dalam mengenai blogger dan internet ini.

ConversionConversion EmoticonEmoticon

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
:lv
Subscribe to: Post Comments (Atom)