Merubah Pesan Validasi please fill out this field dengan bahasa kita bootstrap

Howeby- Kita membahas bagaimana cara merubah pesan peringatan/validasi yang sudah tersetting di bootstrap please fill out this field menjadi pesan peringatan sesuai dengan bahasa yang kita inginkan. Tujuan utama merubah pesan ini adalah memudahkan kita untuk menyampaikan informasi validasi ke user sehingga user  akan dengan mudah memahami informasi apa yang diinginkan oleh sistem.

Gambar 1.

Sebagai contoh pesan error/pesan peringatannya data tidak boleh kosong. Caranya cukup mudah dengan menambahkan script berikut

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 2. Hasil penerapan script

 

Script 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.
semoga bermanfaat.

Sumber: www.stackoverflow.com