Serba Tulisan: May 2015

Thursday 14 May 2015

Check Uncheck All Dengan JQuery

Jika kita sedang membuat suatu aplikasi yang memiliki jumlah Checkbox yang cukup banyak, kita harus mempertimbangkan untuk membuat check / uncheck all untuk memfasilitasi jika pengguna ingin memilih semua pilihan dengan cara efektif daripada mengkliknya satu persatu. Pada pembahasan kali ini kita akan membuat semua checkbox terceklis atau tidak dengan satu kali klik menggunakan jQuery.

Kode JQuery
Untuk syntak jquery yang digunakan cukup mudah hanya memerlukan beberapa baris saja, seperti berikut,

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
        $("#checkall").click(function(){
               $("#checkboxes").find(":checkbox").attr("checked",this.checked);
        });
    })
</script>

Kode HTML

<body>
        <div id="box">
            Silahkan Pilih (boleh lebih dari satu)
            <div id="checkboxes">
                <input type="checkbox" value="Java">Java <br>
                <input type="checkbox" value="PHP">PHP <br>
                <input type="checkbox" value="JavaScript">JavaScript <br>
                <input type="checkbox" value="HTML">HTML <br>
                <input type="checkbox" value="CSS">CSS <br>
                <hr>
                <input type="checkbox" id="checkall" >Check/Uncheck All <br>
            </div>
        </div>
</body>

Kode CSS

<style type="text/css">
            #box{
              width:500px;
              background:#96A8E0;
              padding:10px;
              border:solid #4968CC;
              margin:0 auto;
            }

            input{
              margin-right: 10px;
            }
</style>

Demikian sedikit penjelasan untuk membuat check/uncheck all dengan menggunakan jQuery. Untuk contohnya bisa dilihat di link Berikut.

Semoga bermanfaat..

Baca Selengkapnya »

Wednesday 13 May 2015

Membuat Validasi Form Dengan HTML5

Pada artikel sebelumnya sudah dibahas mengenai pembuatan validasi form dengan jquery, dan pada artikel ini juga akan dibahas pembuatan validasi form hanya saja tidak menggunakan jquery tetapi menggunakan HTML5. Berikut beberapa validasi yang akan kita terapkan pada inputan form :

1. Validasi inputan harus terisi (required)
Pada aturan ini, inputan tidak boleh kosong dan harus diisi. Pada HTML5 kita hanya cukup menambahkan property required="required" atau cukup dengan required seperti contoh berikut,

<form>
Nama : <input type="text" required="required" /><br />
Nama Kecil : <input type="text" required /><br />
<input type="submit" value="Submit now" />
</form>

2. Validasi penulisan email
Agar pengimputan alamat email yang dilakukan user sesuai maka pada HTML5 kita cukup tambahkan atribut type="email" seperti contoh berikut,

<form>
Email : <input type="email" /><br />
<input type="submit" value="Submit now" />
</form>

Selain menambahkan atribut diatas, kita juga bisa menggunakan patern seperti berikut,

<form>
Email : <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" /><br />
<input type="submit" value="Submit now" />
</form>

3. Validasi penulisan URL
Agar penulisan link atau URL sesuai, maka pada HTML5 kita tambahkan atribut type="url" seperti contoh berikut,

<form>
Link : <input type="url" /><br />
<input type="submit" value="Submit now" />
</form>

4. Validasi number telepon
Untuk penulisan inputan no telp sesuai, pada HTML5 kita bisa tambahkan attribut type="tel" seperti berikut,

<form>
No. Telepon: <input type="tel" /><br />
<input type="submit" value="Submit now" />
</form>

5. Validasi penulisan tanggal
Untuk penulisan tanggal pada HTML5 kita bisa menggunakan atau menambahkan attribut type="date" seperti berikut,

<form>
Tanggal Lahir : <input type="date" /><br />
<input type="submit" value="Submit now" />
</form>

Untuk melihat contoh keseluruhan validasi diatas, bisa dilihat pada link Berikut.

Semoga bermanfaat ...!!

Baca Selengkapnya »