Cara menggunakan data-val-required html

Pada posting sebelumnya telah dibahas tentang dasar-dasar tag helper dan perbedaannya dengan HTML helper yang dapat dilihat pada dua link berikut ini:

• http://www.rezafaisal.net/?p=3267.
• http://www.rezafaisal.net/?p=3271.

Elemen <input> pada tag HTML dapat digunakan untuk beberapa tipe input, yaitu:

• Text untuk input teks.
• Radio button, tipe ini digunakan untuk memilih sebuah nilai dari beberapa pilihan pilihan nilai yang tersedia.
• Check box bentuk ini digunakan digunakan untuk memilih lebih dari satu nilai dari beberapa pilihan nilai yang tersedia.
• File, tipe ini digunakan untuk memilih file yang akan diupload.

Tag helper <input> memiliki kemampuan untuk menentukan tipe input secara otomatis berdasarkan tipe data dari property pada class model. Sebagai contoh dimiliki class model berikut ini.

using System;

using System.ComponentModel.DataAnnotations;

namespace EFCoreBookStore.Models

{

    public partial class ContohModel{

        [Display(Name ="Contoh Text")]

        public String ContohText{set; get;}

        [Display(Name ="Contoh Date Time")]

        public DateTime ContohDateTime{set; get;}

        [Display(Name ="Contoh Number")]

        public Double ContohNumber{set; get;}

        [Display(Name ="Contoh Boolean")]

        public Boolean ContohBoolean{set; get;}

    }

}

Kemudian berikut ini adalah contoh penggunaan tag helper input.

@model EFCoreBookStore.Models.ContohModel

<form asp-controller="Latihan" asp-action="Template">

  <label asp-for="ContohText"></label>:

  <input asp-for="ContohText" />

  <br/>

  <label asp-for="ContohDateTime"></label>:

  <input asp-for="ContohDateTime" />

  <br/>

  <label asp-for="ContohNumber"></label>:

  <input asp-for="ContohNumber" />

  <br/>

  <label asp-for="ContohBoolean"></label>:

  <input asp-for="ContohBoolean" />

  <br/>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

Pada tag helper input digunakan atribut asp-for untuk menentukan property class model yang ditangani oleh tag helper. Dari contoh di atas dapat dilihat tidak ada penentuan nilai untuk atribut “type” pada tag <input> seperti umumnya ditemui pada tag HTML. Hasil dari render HTML contoh tag helper di atas adalah sebagai berikut.

<form action="/Latihan/Template" method="post">

  <label for="ContohText">Contoh Text</label>:

  <input type="text" id="ContohText" name="ContohText" value="" />

  <br/>

  <label for="ContohDateTime">Contoh Date Time</label>:

  <input type="datetime" data-val="true"

         data-val-required="The Contoh Date Time field is required."

         id="ContohDateTime" name="ContohDateTime" value="" />

  <br/>

  <label for="ContohNumber">Contoh Number</label>:

  <input type="text" data-val="true"

         data-val-number="The field Contoh Number must be a number."

         data-val-required="The Contoh Number field is required."

         id="ContohNumber" name="ContohNumber" value="" />

  <br/>

  <label for="ContohBoolean">Contoh Boolean</label>:

  <input data-val="true"

         data-val-required="The Contoh Boolean field is required."

         id="ContohBoolean" name="ContohBoolean" type="checkbox"

         value="true" />

  <br/>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

Dari hasil render di atas dapat dilihat secara otomatis telah ditambahkan atribut-atribut pada setiap elemen input sesuai dengan tipe datanya.

Tag helper input juga dapat membaca atribut pada setiap property pada class model untuk menentukan tipe input yang akan digunakan. Berikut ini adalah contoh model yang menggunakan atribut untuk menentukan tipe data untuk property.

using System;

using System.ComponentModel.DataAnnotations;

namespace EFCoreBookStore.Models

{

    public partial class ContohAtributModel{

        [Display(Name ="Contoh Email")]

        [EmailAddressAttribute]

        public String ContohEmail{set; get;}

        [Display(Name ="Contoh URL")]

        [UrlAttribute]

        public String ContohUrl{set; get;}

        [Display(Name ="Contoh Phone")]

        [PhoneAttribute]

        public String ContohPhone{set; get;}

        [Display(Name ="Contoh Password")]

        [DataType(DataType.Password)]

        public String ContohPassword{set; get;}

        [Display(Name ="Contoh Date")]

        [DataType(DataType.Date)]

        public DateTime ContohDate{set; get;}

        [Display(Name ="Contoh Time")]

        [DataType(DataType.Time)]

        public DateTime ContohTime{set; get;}

    }

}

Dan berikut ini adalah contoh penggunaan tag helper input untuk class model di atas.

@model EFCoreBookStore.Models.ContohAtributModel

<form asp-controller="Latihan" asp-action="Template">

  <label asp-for="ContohEmail"></label>:

  <input asp-for="ContohEmail" />

  <br/>

  <label asp-for="ContohUrl"></label>:

  <input asp-for="ContohUrl" />

  <br/>

  <label asp-for="ContohPhone"></label>:

  <input asp-for="ContohPhone" />

  <br/>

  <label asp-for="ContohPassword"></label>:

  <input asp-for="ContohPassword" />

  <br/>

  <label asp-for="ContohDate"></label>:

  <input asp-for="ContohDate" />

  <br/>

  <label asp-for="ContohTime"></label>:

  <input asp-for="ContohTime" />

  <br/>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

Kode di atas akan menghasilkan antarmuka seperti pada gambar di bawah ini.

Dan berikut ini adalah hasil render HTML dari contoh tag helper di atas.

<form action="/Latihan/Template" method="post">

  <label for="ContohEmail">Contoh Email</label>:

  <input type="email" data-val="true"

      data-val-email="The Contoh Email field is not a valid e-mail address."

      id="ContohEmail" name="ContohEmail" value="" />

  <br/>

  <label for="ContohUrl">Contoh URL</label>:

  <input type="url" data-val="true"

         data-val-url="The Contoh URL field is not a valid fully-qualified http, https, or ftp URL."

         id="ContohUrl" name="ContohUrl" value="" />

  <br/>

  <label for="ContohPhone">Contoh Phone</label>:

  <input type="tel" data-val="true"

        data-val-phone="The Contoh Phone field is not a valid phone number."

        id="ContohPhone" name="ContohPhone" value="" />

  <br/>

  <label for="ContohPassword">Contoh Password</label>:

  <input type="password" id="ContohPassword" name="ContohPassword" />

  <br/>

  <label for="ContohDate">Contoh Date</label>:

  <input type="date" data-val="true"

         data-val-required="The Contoh Date field is required."

         id="ContohDate" name="ContohDate" value="" />

  <br/>

  <label for="ContohTime">Contoh Time</label>:

  <input type="time" data-val="true"

         data-val-required="The Contoh Time field is required."

         id="ContohTime" name="ContohTime" value="" />

  <br/>

  <button type="submit" class="btn btn-success">Submit</button>

</form>

Dari contoh di atas dapat dilihat bagaimana secara otomatis tag helper input memberikan atribut HTML sesuai dengan atribut property class model.

Walau pada contoh di atas diperlihatkan cara kerja otomatis tag helper input untuk menentukan nilai atribut type, tetapi developer tetap dapat memberikan nilai atribut type secara manual. Misalnya dapat dilihat pada contoh di bawah ini.

<label asp-for="ContohPassword"></label>:

<input asp-for="ContohPassword" type="password" />

Dari penjelasan dan contoh-contoh di atas dapat dilihat tag helper input dapat bekerja secara otamatis untuk menentukan atribut-atribut didalamnya berdasarkan tipe data atau atribut yang dimiliki oleh property class model.

Selamat mencoba.