Membuat Validasi Form Dengan HTML5

Pada artikel sebelumnya sudah dibahas mengenai pembuatan validasi form dengan jquery, dan pada artikel ini juga akan dibahas pembuatan validasi form hanya saja tidak menggunakan jquery tetapi menggunakan HTML5. Berikut beberapa validasi yang akan kita terapkan pada inputan form :



1. Validasi inputan harus terisi (required)
Pada aturan ini, inputan tidak boleh kosong dan harus diisi. Pada HTML5 kita hanya cukup menambahkan property required="required" atau cukup dengan required seperti contoh berikut,


<form>
  Nama : <input type="text" required="required" /><br />
  Nama Kecil : <input type="text" required /><br />
  <input type="submit" value="Submit now" />
</form>

2. Validasi penulisan email
Agar pengimputan alamat email yang dilakukan user sesuai maka pada HTML5 kita cukup tambahkan atribut type="email" seperti contoh berikut,

<form>
  Email : <input type="email" /><br />
  <input type="submit" value="Submit now" />
</form>


Selain menambahkan atribut diatas, kita juga bisa menggunakan patern seperti berikut,

<form>
  Email : <input pattern="/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" /><br />
  <input type="submit" value="Submit now" />
</form>

3. Validasi penulisan URL
Agar penulisan link atau URL sesuai, maka pada HTML5 kita tambahkan atribut type="url" seperti contoh berikut,

<form>
  Link : <input type="url" /><br />
  <input type="submit" value="Submit now" />
</form>

4. Validasi number telepon
Untuk penulisan inputan no telp sesuai, pada HTML5 kita bisa tambahkan attribut type="tel"  seperti berikut,

 <form>
  No. Telepon: <input type="tel" /><br />
  <input type="submit" value="Submit now" />
</form>

5. Validasi penulisan tanggal
Untuk penulisan tanggal pada HTML5 kita bisa menggunakan atau menambahkan attribut type="date" seperti berikut,


<form>
  Tanggal Lahir : <input type="date" /><br />
  <input type="submit" value="Submit now" />
</form>

Untuk melihat contoh keseluruhan validasi diatas, bisa dilihat pada link Berikut.

Semoga bermanfaat ...!!