Share For You

Membuat Sebuah Form Untuk Registrasi Maupun Untuk Login tidak lengkap rasanya bila tidak ada sebuah validasi, dimana validasi itu akan mengecek apakah data yang dimasukan user sudah sesuai baik dari format penulisan maupun ke absahan datanya, kali ini saya akan berbagi bagaimana membuat sebuah form validasi dengan Jquery Kenapa Jquery karena dengan Jquery Validasi Form akan terlihat begitu indah .biar nggak terlalu penasaran seperti apa form validasi yang akan kita buat, yah seperti ini :

Siapkan Alat - alat tempur kita :
1. Library Jquery [ Download disini ] atau kalau mau langsung gunakan link ini dari Google API

//hosted by Google API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </text area>

2. Plugin Validasi Jquery [ Download Disini ] atau kalau mau langsung gunakan link ini dari Microsoft Ajax CDN

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

3. Kita buat file Jquery untuk mengatur form validasi seperti ini

(function($,W,D) { var JQUERY4U = {}; JQUERY4U.UTIL = { setupFormValidation: function() { //form validation rules $("#register-form").validate({ rules: { firstname: "required", lastname: "required", email: { required: true, email: true }, password: { required: true, minlength: 5 }, agree: "required" }, messages: { firstname: "Silahkan Masukan Nama Depan Anda", lastname: "Silahkan Masukan Nama Belakang Anda", password: { required: "Silahkan Masukan Password", minlength: "Password Harus Lebih dari 5 Karakter" }, email: "Silahkan Masukan Email Yang Benar", agree: "Setujui dengan peraturan yang berlaku" }, submitHandler: function(form) { form.submit(); } }); } } //when the dom has loaded setup form validation rules $(D).ready(function($) { JQUERY4U.UTIL.setupFormValidation(); }); })(jQuery, window, document);

4. Lalu kita buat lagi file HTML untuk membuat form.

<!-- HTML form validasi --> <tr> <td> <form action="" method="post" id="register-form" novalidate="novalidate"> <h2> Registrasi Members</h2> <div id="form-content"> <fieldset> <div class="fieldgroup"> <label for="firstname">Nama Depan</label> <input type="text" name="firstname"> </div> <div class="fieldgroup"> <label for="lastname">Nama Belakang</label> <input type="text" name="lastname"> </div> <div class="fieldgroup"> <label for="email">Email</label> <input type="text" name="email"> </div> <div class="fieldgroup"> <label for="password">Password</label> <input type="password" name="password"> </div> <div class="fieldgroup"> <p class="right"> Jika Klik Daftar berarti anda setuju dengan peraturan kami. Lihat <a target="_blank" href="/policy">peraturan</a>.</p> <input type="submit" value="Daftar" class="submit"> </div> </fieldset> </div> <div class="fieldgroup"> <p> Sudah Mendaftar <a href="/login"> Masuk </a>.</p> </div> </form> <!-- akhir HTML form validasi -->

5. Tambahkan Css.

#register-form { background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF; border: 1px solid #DFDCDC; border-radius: 15px 15px 15px 15px; display: inline-block; margin-bottom: 30px; margin-left: 20px; margin-top: 10px; padding: 25px 50px 10px; width: 350px; } #register-form .fieldgroup { background: url("form-divider.gif") repeat-x scroll left top transparent; display: inline-block; padding: 8px 10px; width: 340px; } #register-form .fieldgroup label { float: left; padding: 15px 0 0; text-align: right; width: 110px; } #register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select { float: right; margin: 10px 0; height: 25px; } #register-form .submit { padding: 10px; width: 220px; height: 40px !important; } #register-form .fieldgroup label.error { color: #FB3A3A; display: inline-block; margin: 4px 0 5px 125px; padding: 0; text-align: left; width: 220px; }

Nb : untuk tutorial ini saya tidak posting code seluruhnya hanya intinya saja untuk full codenya silahkan download source code nya.