Merubah Pesan Validasi "please fill out this field" dengan Bahasa Sendiri Bootstrap

Setelah sebelumnya kita berhasil membuat pesan peringatan error,

maka selanjutnya kita membahas bagaimana cara merubah pesan peringatan dalam bahasa inggris ""please fill out this field" menjadi pesan peringatan sesuai dengan bahasa keinginan kita.

Tujuan utama merubah pesan ini adalah untuk memudahkan user  memahami apa yang sebenarnya diinginkan oleh sistem.

Semisal kita menginginkan pesan error/pesan peringatannya adalah " data tidak boleh kosong " atau teman-teman

Caranya cukup mudah dengan menambahkan

oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')"
pada tag input

Penerapannya:

 <form role="form" class="form-horizontal" action="simpanuser.php" method="post">
          <div class="form-group">
          <label class="control-label col-sm-2" for="username">Username</label>
          <div class="col-sm-8">
           <input type="text" name="username" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
             </div>
             </div>
</form>

Hasil:

 Gambar: Pesan Validasi Bahasa Kita Sendiri

 Script secara keseluruhan:

<form role="form" class="form-horizontal" action="simpanuser.php" method="post">
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="username">Username</label>
                            <div class="col-sm-8">
                            <input type="text" name="username" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap">password</label>
                            <div class="col-sm-8">
                            <input type="text" name="password" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap" >Nama Lengkap</label>
                            <div class="col-sm-8">
                            <input type="text" name="nama_lengkap" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                       
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="nama lengkap">Email</label>
                            <div class="col-sm-8">
                            <input type="text" name="email" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="No Telepon">No Telepon</label>
                            <div class="col-sm-8">
                            <input type="text" name="no_telp" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2" for="Level">Level</label>
                            <div class="col-sm-8">
                            <input type="text" name="level" class="form-control" required oninvalid="this.setCustomValidity('data tidak boleh kosong')" oninput="setCustomValidity('')">
                            </div>
                       
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary" name="submitted" value="simpan">Simpan</button>
                            <button type="reset" class="btn btn-danger" onclick="self.history.back()">Batal</button>
                            </div>
                        </div>
                    </form>

Selain cara diatas, ada banyak cara lain yang bisa digunakan untuk merubah pesan validasi. Sebagai referensi dapat dicari di  www.stackoverflow.com

semoga bermanfaat.

Tutorial Lengkap Soal Bootstrap dapat dikunjungi di www.howeby.blogspot.com