TaskCoder~ Learn to code

ok kawan-kawan, TaskCoder ingin membahas tentang Merubah Pesan Validasi "required", apa kawan-kawan tau APA ITU REQUIRED ?

Definisi dan Penggunaan

Atribut yang diperlukan adalah atribut boolean.
Fungsi penggunaan requiired untuk menetapkan bahwa sebuah field input harus diisi sebelum mengirimkan data.

Catatan: Atribut yang diperlukan bekerja dengan jenis berikut masukan: teks, pencarian, url, tel, email, password, pemetik tanggal, nomor, checkbox, radio, dan berkas.

kita langsung ke cara Merubah Pesan Validasi "required".

1. Cukup menambahkan dengan kode di bawah ini.

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

Contoh: Script Merubah Pesan Validasi "required"

<div class="panel panel-default">
 <form action="<?php echo $this->module_url;?>/show" method="post" enctype="multipart/form-data">
  <table class="da-table dataTabler"  border="1" cellspacing="1" cellpadding="2">
   <tr class="eventHeader">
    <td class="eventHeader" align="center" colspan="2">Search Detail Bonus</td>
   </tr>
   <tr class="eventList">
    <td class="eventList" width="200">Tahun</td>
    <td class="eventList">
     <select style="width: 50%; height: 30px;" name="tahun" required oninvalid="this.setCustomValidity('Tahun tidak boleh kosong')" oninput="setCustomValidity('')">>
      <option value="2013" >2013</option>
      <option value="2014" >2014</option>
      <option value="2015" >2015</option>
      <option value="2016" >2016</option>
      <option value="2017" >2017</option>
      <option value="2018" >2018</option>
      <option value="2019" >2019</option>
      
     </select>
    </td>
   </tr>
   <tr class="eventList">
    <td class="eventList" width="200">Bulan</td>
    <td class="eventList">
     <select style="width: 50%; height: 30px;" name="bulan" required oninvalid="this.setCustomValidity('Bulan tidak boleh kosong')" oninput="setCustomValidity('')">>
      <option value="januari" >januari</option>
      <option value="februari" >februari</option>
      <option value="maret" >maret</option>
      <option value="april" >april</option>
      <option value="april">april</option>
      <option value="mei">mei</option>
      <option value="juni" >juni</option>
     </select>
    </td>
   </tr>
   <tr class="eventList">
    <td class="eventList" width="200">Provinsi</td>
    <td class="eventList">
     <select style="width: 50%; height: 30px;" name="provinsi" required oninvalid="this.setCustomValidity('Provinsi tidak boleh kosong')" oninput="setCustomValidity('')">>
      <option value="jawa tengah" >jawa tengah</option>
      <option value="jawa barat" >jawa barat</option>
      <option value="jawa timur" >jawa timur</option>
      <option value="sulawesi" >sulawesi</option>
      <option value="kalimantan" >kalimantan</option>
      
     </select>
    </td>
   </tr>
   <tr class="eventList">
    <td class="eventList" width="200">Kota/Kabupaten</td>
    <td class="eventList">
     <select style="width: 50%; height: 30px;" name="city">
      <option value="Kota Semarang" >Kota Semarang</option>
      <option value="Kota jogja" >Kota jogja</option>
      <option value="Kota Bandung" >Kota Bandung</option>
      <option value="Kota malang" >Kota malang</option>
      <option value="Kota Pontianak" >Kota Pontianak</option>
      
     </select>
    </td>
   </tr>
   <tr>
    <td class="eventList"></td>
    <td class="eventList"><input class="btn btn-primary" value="Search" name="submit" type="submit" /></td>
   </tr>
  </table>
 </form> 
</div>

Untuk hasil Ouputnya Seperti gambaar di bawah ini.