Validasi

Menampilkan validasi dari server merupakan hal yang penting dalam pengembangan aplikasi. Validasi ini dapat digunakan untuk memberikan feedback kepada pengguna terkait data yang diinputkan. Pada umumnya, validasi dilakukan pada saat melakukan request ke server. Berikut adalah contoh validasi yang dapat dilakukan pada saat melakukan request.

Menampilkan Pesan Error

Pada iampack anda dapat langsung menampilkan pesan error yang diberikan oleh server secara otomatis pada inputan yang di validasi. Berikut adalah contoh penggunaan validasi pada saat melakukan request. fungsi validate akan menampilkan pesan error pada inputan yang di validasi dengan default class is-invalid. dan pesan error akan di tampilkan pada element dengan class invalid-feedback.

HTML

<form id="form">
    <input type="text" name="name" validate="name">
    <input type="text" name="age" validate="age">
    <button type="submit">Submit</button>
</form>

JS

$("#form").on('submit',function(e){
    e.preventDefault();
    http.request({
        url: "https://jsonplaceholder.typicode.com/posts",
        data: $(this).serialize(),
        onError: function(err) {
            http.validate(err.responseJSON);
        }
    })
})

Response Error

{
    "message": "The name field is required.",
    "errors": {
        "name": [
            "The name field is required."
        ],
        "age": [
            "The age field is required."
        ]
    }
}

warning

Pesan error yang dihasilkan oleh server harus mengikuti format yang telah ditentukan oleh iampact. Gunakan status code 422 untuk respon validasi, dan pastikan atribut validasi disamakan dengan nilai name dari input yang divalidasi.

Jika Anda menggunakan $request->validate() di Laravel, format pesan error secara default sudah sesuai dengan standar ini.

Menampilkan Pesan Error Multi input

Pada kasus dimana inputan yang di validasi lebih dari satu, anda dapat menampilkan pesan error pada inputan yang di validasi dengan menambahkan attribute validate=name.* pada inputan tersebut.

<form id="form">
    <input type="text" name="age[]" validate="age.*">
    <input type="text" name="age[]" validate="age.*">
    <input type="text" name="age[]" validate="age.*">
    <button type="submit">Submit</button
</form>

Integrasi Library Lain

Pada saat pengembangan aplikasi, kita sering kali menggunakan library pihak ketiga untuk melakukan custom inputan seperti datepicker, select2, dll. Berikut adalah contoh penggunaan validasi pada saat menggunakan library pihak ketiga.

<form id="form">
  <div validate="file">
    <input type="file" name="file" class="filepond" />
  </div>
  <div validate="category">
    <select name="category" class="select2"></select>
  </div>
  <button type="submit">Submit</button>
</form>

Anda dapat menambahkan attribute validate pada parent element dari inputan yang di validasi. Dengan begitu, pesan error akan ditampilkan pada parent element tersebut.

warning

Tambahkan custom css pada parent element untuk menampilkan pesan error pada inputan yang di validasi.

.is-invalid .select2-container {
  /** Untuk menambahkan border merah pada select2 */
  border-color: #dc3545 !important`;
}