HTMl 5 Validator Tutorial

Validasi input sangat penting dilakukan untuk mencegah kesalahan dalam nilai input.

Misalnya:

Jika ada field masih kosong, maka akan akan tampil pesan data masih kososng.

Dulu, kita memvalidasi inputan menggunakan Javascript.

Sekarang sudah tidak lagi.

Karena HTML 5 sudah menyediakan atribut yang dapat kita gunakan untuk validasi.

Namun, bahasa yang digunakan adalah bahasa inggris. (Tergantung dari lokliasasi pengaturan di Browser)

Bagaimana jika kita ingin merubahnya ke bahasa indonesia saja?

Maka kita harus menindih pesan validasinya dengan Javascript.

Fungsi Javascript untuk Mengubah Pesan Validasi

Kita menggunakan JQuery, berikut ini bentuk kodenya:

$("form input[type=text]").on("change invalid", function() {
    var textfield = $(this).get(0);
    
    // hapus dulu pesan yang sudah ada
    textfield.setCustomValidity("");
    
    if (!textfield.validity.valid) {
      textfield.setCustomValidity("Tidak boleh kosong!");  
    }
});

Kode tersebut akan dieksekusi saat event change dan invalid.

Lalu mengubah teks validasinya dengan method setCustomValidity().

Pada kode di atas, kita menyeleksi seluruh tag <input>.

Apabila ingin menyeleksi elemen lain, seperti <textarea>, maka kita bisa tambahkan selector-nya seperti ini:

$('form input[type=text], form textarea').on('change invalid', function() {
    //… 
}

Demo

Referensi: Stack Overflow