Form Validasi HTML5 dengan menggunakan atribut “Pattern”

Dalam tutorial ini kita akan mengeksplorasi atribut pattern HTML, digunakan untuk membantu kita menyesuaikan cara kita memvalidasi form kita.

Validation

Form validasi snagat penting untuk keamanan situs web. Proses validasi mengoreksi apakah nilai input dalam format yang benar unyuk mengirimkannya. Misalnya, jika kita memiliki field inputang untuk alamat email, nilainya pasti berisi alamat email yang valid, harus dimulai huruf atau angka, diikuti oleh simbol @, lalu diakhiri dengan nama domain.

Spesifikasi HTML5 telah membuat validasi yang sedikit lebih mudah dengan diperkenalkannya jenis inputan baru seperti email, url, dan tel dan juga dikemas dengan validasi yang telah ditentukan. Apapun nilai yang diberikan tidak terpengaruhi dengan format yang diharapkan, jenis input ini akan membuat pesan error sehingga mencegah pengiriman.

Mengharapkan setiap skenario inputan yang mungkin untuk dilayani tidak praktis. Bagaimana jika Anda memiliki nama pengguna, kode pos, atau jenis data khusus yang tidak ditentukan jenis standar inputan? Bagaimana kita memvalidasi inputan tersebut? Disinilah pola  pattern  ikut bermain

Menggunakan atribut pattern

Atribut pattern hanya berlaku pada elemen input. Hal ini memungkinkan kita untuk mendifiniskan aturan kita sendiri untuk memvalidasi nilai input menggunakan Regular Expressions(RegEx Express). Sekali lagi, jika nilainya tidak sesuai dengan pila yang ditentukan, input kan memunculkan error.

Misalnya, katakanlah kita memiliki username dalam form kita. Tidak ada tipe standar untuk username, oleh karena itu kita menggunakan tipe input text biasa:

<form action="somefile.php">
    <input type="text" name="username" placeholder="Username">
</form>

Mari mendefiniskan aturan untuk ditambahkan menggunakan atribut pattern. Dalam kasus ini, kita akan menentukan bahwa username hanya boleh terdiri dari huruf kecil, tidak ada huruf besar, angka atau karakter khusus lainnya yang diperbolehkan. Selain itu panjang username tidak boleh lebih dari 15 karakter. Di RegEx, aturan ini dapat dinyatakan sebagai [a-z]{1,15}.

Tambahkan [a-z] {1,15} sebagai nilai atribut pattern dalam inputan username kami:

<form action="somefile.php">
    <input type="text" name="username" placeholder="Username" pattern="[a-z]{1,15}">
</form>

Sekarang, karena hanya menerima huruf kecil, mengirimkan nilai lainnya akan mengeluarkan pesan error.

Seperti yang dapat Anda lihat diatas, muncul pesan error “Please match the requested format.”. jadi validasi kita berhasil, namun pesan ini tidak membantu user memahami format yang diminta sebenarnya . UX gagal.

Costumize pesan validasi

Untungnya kita bisa custom/menyesuaikan pesan agar lebih membantu user, dan kami memiliki beberapa cara untuk melakukannya. Pendekatan termudah adalah menentukan atribut title dalam elemen input.

<form action="somefile.php">
    <input
        type="text"
        name="username"
        placeholder="Username"
        pattern="[a-z]{1,15}"
        title="Username should only contain lowercase letters. e.g. john">
</form>

Sekarang sertakan title bersama dengan pesan default:

Namun pesan popup tidak konsisten. Jika kita bandingkan dengan yang dikeluarkan dengan tipe input email yang ditunjukan sebelumnya, petunjuk sebenarnya bisa lebih menonjol.

Pendekatan kedua akan menyelesaikan ini untuk kita

Mengganti pesan default validasi

Mari sekarang ganti default “Please match the requested format” dengan pesan yang benar-benar di custom. Kami akan menggunakan sedikit JavaScript untuk melakukannya.

Mulailah dengan menambahkan id ke elemen input, sehingga bisa memilihnya dengan mudah.

<form action="somefile.php">
    <input
        type="text"
        name="username"
        placeholder="Username"
        pattern="[a-z]{1,15}"
        id="username">
</form>

Sekarang, kita dapat memilih elemen input menggunakan JavaScript dan menetapkannya ke variable (antara tag <script>) di halaman kita, dalam file JavaScript yang terpisah, atau di panek JS pada CodePen);

var input = document.getElementById('username');

Terakhir, kita tentukan pesan yang digunaan saat input menunjukan keadaannya yang tidak valid.

input.oninvalid = function(event) {
    event.target.setCustomValidity('Username should only contain lowercase letters. e.g. john');
}

Event oninvalid  event inheritense objek berisi beberapa properti termasuk properti target(elemen tidak valid) dan validationMessage yang berisi pesan teks error. Pada contoh diatas, kita telah ovveriden pesan teks menggunakan metode setCustomValidity()

Kita sekarang harus menemukan pesan custom dengan mulus mengganti default

Styling

Untuk melengkapi jenis input baru dan metode-metode ini untuk mengatur pesan custom validasi, spesifikasi CSS3 membawa beberapa pseudo-code yang berguna, valid dan invalid.memungkinkan kita untuk menerapkan style tergantung pada keadaan validitas inputan, misalnya:

input:invalid {
    border-color: red;
}
input,
input:valid {
    border-color: #ccc;
}

Ada beberapa hal yang perlu diingat ketika menggunakan pseudo-class ini:

• Pertama, valid digunakan sebagai default, bahkan ketika value input kosong. Dengan demikian, seperti yang Anda lihat diatas, kita atur border-color ke #ccc warna default yang diberikan ke elemen input. Value kosong selalu dianggap valid, kecuali jika kita telah menambahjan atribut required. Dalam hal ini, input tidak valid dan warna border merah diberikan
• Style valid dan invalid berlaku saat pengguna mengetik, meskipun nilainya kosong. Perubahan style instan dapat membuat pengguna panik.

Sebuah kata tentang styling pesan popup

Form validasi telah menjadi standar baru sesuai spesifikasi HTML5, namun bagaimana tampilan kesalahan muncul sepenuhnya tergantung pada vendor browser. Harapkan berbagai estetika di berbagai browser, yang tidak akan membantu konsistensi UI Anda.

Google chroome mencegah kemampuan untuk mencustomize style popup default beberapa tahun yang lalu. Jika ini adalah sesuatu yang ingin Anda capau, satu-satunya pilihan yang tersisa adalah sepenuhnya mengganti pesan popup menggunakan JavaScript jadi mari kita lihat bagaimana cara kerjanya!

Ada yang lebih lagi nih

Kita akan membuat custom popup yang akan muncul saat nilai masukan kami tidak valid. Untuk memulainya kita perlu memilih beberapa elemen yang dibutuhkan yaitu input and the form

var input = document.getElementById('username');
var form  = document.getElementById('form');

Selanjutnya, kita akan membuat elemen baru yang akan berisi pesan kita:

var elem               = document.createElement('div');
    elem.id            = 'notify';
    elem.style.display = 'none';
    form.appendChild(elem);

Kita membuat elemen div baru, kita akan memberinya notify dan menyembunyikan settingan display dengan property no, terakhir, kita menambahkan div baru dengan form

Bekerja dengan event

Ada dua event yang harus kita jalani. Pertama event invalid yang dipanggil ketika value dari input tidak sesuai dengan pola/pattern. Kita akan menjalankan event invalid :

input.addEventListener('invalid', function(event){
    event.preventDefault();
    if ( ! event.target.validity.valid ) {
        elem.textContent   = 'Username should only contain lowercase letters e.g. john';
        elem.className     = 'error';
        elem.style.display = 'block';
 
        input.className    = 'invalid animated shake';
    }
});

Disini dengan event.preventDefault(); kita prevent default tindakan sehingga pesan popup browser default tidak muncul. Sebaliknya, kita akan menunjukannya melalui elemen div baru. Kita tambahkan text message di dalam konten, menambahkan class baru, kesalahan dan menampilkan pesan dengan mengatur tampilan untuk diblokir.

Kita juga menambahkan class, invalid untuk elemen input, memberikan border color warna merah. Kita juga membutuhkan aturan style CSS pada stylesheet

input.invalid {
        border-color: #DD2C00;
}

selain itu, Anda juga dapat menambahkan animated shake class dari Animate.css. Yang akan memberikan efek dengan menggunakan shake animasi

Event kedua adalah event input. Event ini memanggil ketika nilai input diubah. Kita akan menggunakan event untuk mengembalikan masukan ke keadaan normalnya, serta menyembunyikan pesan popup sebagai berikut:

input.addEventListener('input', function(event){
    if ( 'block' === elem.style.display ) {
        input.className = '';
        elem.style.display = 'none';
    }
});

seperti yang Anda lihat diatas, kita akan menghapus nama class form input elemen dan menyembunyikan pesan popup.

Sekarang kita memiliki pesan validari popup yang telah di customize. Cobalah masukan nilai yang tidak valid

Catatan: Jangan lupa untuk melihat GraphicRiver jika Anda mencari desain UI yang inspiratif.

Terakhir

Menggunakan jenis input standar bersama dengan atribut pola akan memberikan formulir Anda lapisan tambahan validasi, tetapi ketahuilah bahwa Anda harus melakukan beberapa jenis validasi sisi server juga.

Secara mengejutkan, bahkan ketika pengguna telah menonaktifkan JavaScript di browser, browser terbaru masih akan menampilkan validasi popup dan mencegah pengiriman formulir. Safari, bagaimanapun, tidak mendukung atribut pola pada saat penulisan. Fungsi serupa bisa ditiru menggunakan webfim buatan Polyfill.

Kami harap Anda menikmati tutorial dan menyimpannya sebagai referensi praktis untuk Validasi HTML5. Semoga bermanfaat

Comments

comments