Memakai HTML5 Constraints Validation API


Validasi adalah sesuatu yang selalu dibutuhkan dalam setiap kode program. Validasi dapat dilakukan dengan membuat kode program yang memeriksa setiap nilai satu per satu. Tapi cara yang lebih elegan adalah melakukan validasi dengan memberikan constraint secara deklaratif. Cara ini tidak melibatkan kode program sehingga lebih ringkat, sederhana, dan mudah dipahami. Sebagai contoh, saya sering menggunakan Hibernate Validator (salah satu implementasi dari JSR 349 – Bean Validation Specification). Dengan Hibernate Validator, saya cukup memberikan annotation seperti @NotNull, @Size, @NotBlank, @Past dan sebagainya pada domain class. Hibernate ORM akan menghasilkan tabel dengan constraints seperti pada domain class. Teknologi seperti Spring juga akan memeriksa apakah object yang dikirim dari browser memiliki nilai yang melanggar validasi atau tidak. Demikian juga, saat domain object dikirim dari satu layer ke layer lainnya, teknologi yang bersangkutan dapat memeriksa dan memastikan tidak ada validasi yang dilanggar. Proses validasi jadi sangat sederhana, bukan? Cukup dengan annotation dan semuanya berlangsung otomatis.

Bila Hibernate Validator adalah andalan saya untuk sisi server, lalu bagaimana dengan sisi client/browser? Apakah saya masih harus melakukan validasi secara kode program melalui JavaScript? Beruntungnya, HTML5 memiliki Constraints Validation API yang memungkinkan validasi secara deklaratif. Saya dapat memberikan constraint langsung pada HTML seperti pada contoh berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Latihan</title>  
        <style type='text/css'>
            .baris { margin-bottom: 15px; }
        </style>
    </head>
    <body>
        <form id='frmUtama'>
        <div class='baris'>
            <label>Nama:</label>
            <input id='txtNama' name='nama' type='text' maxlength='50' required/>         
        </div>
        <div class='baris'>
            <label>Email:</label>
            <input id='txtEmail' name='email' type='email' maxlength='100' required/>
        </div>
        <div class='baris'>
            <label>Usia:</label>
            <input id='txtUsia' name='usia' type='number' min='0' max='100'/>
        </div>
        <div class='baris'>
            <label>Berlanggan Sampai:</label>
            <input id='txtTanggal' name='tanggal' type='date' required/>
        </div>        
        <div class='baris'>
            <input type='submit' value='proses'/>
        </div>
    </form>
    </body>
</html>

Pada HTML di atas, saya menggunakan constraint seperti required, maxlength, type='email', type='number' dan type='date'. Browser yang mendukung akan menampilkan pesan kesalahan secara otomatis saat saya men-klik tombol submit, seperti yang terlihat pada gambar berikut ini:

Validasi melalui HTML5 Constraints Validation API

Validasi melalui HTML5 Constraints Validation API

Validasi melalui HTML5 Constraints Validation API

Validasi melalui HTML5 Constraints Validation API

Tidak semua browser mendukung constraint di HTML5. Sebagai contoh, Firefox tidak melakukan validasi untuk type='date'. Sebagai gantinya, saya dapat menggunakan validasi melalui regex dengan menggunakan atribut pattern seperti yang terlihat di HTML berikut ini:

<div class='baris'>
    <label>Berlanggan Sampai:</label>
    <input id='txtTanggal' name='tanggal' type='text' pattern='[0-9]{2}-[0-9]{2}-[0-9]{4}' required/>
</div>        
Memakai regex pada validasi

Memakai regex pada validasi

Bagaimana bila saya ingin mengubah pesan kesalahan yang akan ditampilkan oleh browser? Firefox menyediakan cara cepat dengan menggunakan atribut x-moz-errormessage, seperti pada HTML berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Latihan</title>  
        <style type='text/css'>
            .baris { margin-bottom: 15px; }
        </style>
    </head>
    <body>
        <form id='frmUtama'>
        <div class='baris'>
            <label>Nama:</label>
            <input id='txtNama' name='nama' type='text' maxlength='50' required 
                x-moz-errormessage='Nama harus diisi dengan maksimal 50 karakter'/>            
        </div>
        <div class='baris'>
            <label>Email:</label>
            <input id='txtEmail' name='email' type='email' maxlength='100' required
                x-moz-errormessage='Email harus diisi dengan benar'/>
        </div>
        <div class='baris'>
            <label>Usia:</label>
            <input id='txtUsia' name='usia' type='number' min='0' max='100'
                x-moz-errormessage='Usia harus diisi dengan angka dari 0 hingga maksimal 100'/>
        </div>
        <div class='baris'>
            <label>Berlanggan Sampai:</label>
            <input id='txtTanggal' name='tanggal' type='text' pattern='[0-9]{2}-[0-9]{2}-[0-9]{4}' required
                x-moz-errormessage='Tanggal harus dalam format dd-mm-yyyy seperti 31-12-2013'/>
        </div>        
        <div class='baris'>
            <input type='submit' value='proses'/>
        </div>
    </form>
    </body>
</html>
Memakai pesan kesalahan custom pada validasi

Memakai pesan kesalahan custom pada validasi

Karena x-moz-errormessage adalah atribut khusus Firefox, maka ia tidak berlaku untuk browser lain. Berdasarkan informasi di https://www.w3.org/Bugs/Public/show_bug.cgi?id=10923, proposal untuk menambahkan atribut seperti ini ditolak oleh editor W3C (Status: Rejected) dengan alasan terlalu berlebihan (Rationale: Requested feature seems redundant with existing features). Sepertinya membuat standar yang memenuhi keinginan dan kebutuhan semua orang memang bukanlah sebuah hal mudah.

Lalu, kalau begitu apa cara yang disarankan untuk memberikan pesan kesalahan custom? HTML5 Constraints API memiliki method setCustomValidity() pada setiap elemen di dalam form untuk mengatur pesan kesalahan custom. Untuk menggunakanya, saya perlu memakai JavaScript seperti yang terlihat pada contoh berikut ini:

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Latihan</title>  
        <style type='text/css'>
            .baris { margin-bottom: 15px; }
        </style>
    </head>
    <body>
        <form id='frmUtama'>
            <div class='baris'>
                <label>Nama:</label>
                <input id='txtNama' name='nama' type='text' maxlength='50' required/>         
            </div>
            <div class='baris'>
                <label>Email:</label>
                <input id='txtEmail' name='email' type='email' maxlength='100' required/>
            </div>
            <div class='baris'>
                <label>Usia:</label>
                <input id='txtUsia' name='usia' type='number' min='0' max='100'/>
            </div>
            <div class='baris'>
                <label>Berlanggan Sampai:</label>
                <input id='txtTanggal' name='tanggal' type='text' pattern='[0-9]{2}-[0-9]{2}-[0-9]{4}' required/>
            </div>        
            <div class='baris'>
                <input type='submit' value='proses'/>
            </div>
        </form>
        <script type="application/javascript">
            var pesanKesalahan = {
                'txtNama': 'Nama harus diisi dengan maksimal 50 karakter',
                'txtEmail': 'Email harus diisi dengan benar',
                'txtUsia': 'Usia harus diisi dengan angka dari 0 hingga maksimal 100',
                'txtTanggal': 'Tanggal harus dalam format dd-mm-yyyy seperti 31-12-2013',
            }                   
            function customMessage(e) {
                var state = e.target.validity;
                var invalid = state.patternMismatch || state.rangeOverflow || state.rangeUnderflow || state.stepMismatch ||
                              state.tooLong || state.typeMismatch || state.valueMissing;                                                
                e.target.setCustomValidity(invalid? pesanKesalahan[e.target.id]: '');                                             
            }
            var form = document.getElementById('frmUtama');
            form.addEventListener('input', customMessage, true);
            form.addEventListener('invalid', customMessage, true);                                    
        </script>
    </body>
</html>

Pada kode program JavaScript di atas, saya menampung pesan kesalahan custom pada sebuah JSON agar mudah dimodifikasi dikemudian hari. Saya dapat memeriksa jenis kesalahan yang ada dengan memeriksa nilai property validity dari Constraints Validation API. Nilai customError akan selalu bernilai true bila saya sudah memanggil setCustomValidity() sebelumnya sehingga saya harus mengabaikan nilai tersebut. Bila ada yang tidak valid, saya akan menggunakan pesan kesalahan baru dengan memanggil function setCustomValidity(). Event handler ini akan dikerjakan baik pada event input maupun invalid. Event invalid adalah event yang muncul bila ada input yang tidak valid. Tapi itu tidak cukup, saya perlu mengerjakannya pada event input agar pesan kesalahan dibersihkan (dengan memanggil setCustomValidity('')) bila input sudah valid.

Perihal Solid Snake
I'm nothing...

One Response to Memakai HTML5 Constraints Validation API

  1. thanks 4 sharing, may we get more of knowledges than before

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: