Membuat Validasi Form dengan HTML5 Lengkap , Setelah sebelumnya Suckittrees dot Com menulis tentang Validasi Form dengan Javascript kali ini kita akan membahas validasi dengan HTML5 , Validasi dengan menggunakan HTML5 merupakan validasi yang berjalan disisi client, tidak menggunakan javascript maupun menggunakan jquery , sayang nya sampai saat ini masih ada browser yang belum support dengan HTML 5, namun ini adalah keunggulan dari HTML5. dan sesuai perkembangan teknologinya,,, browser akan menyesuaikan dengan HTML 5, sampai ke mobile / smartphone

Validasi yang kita bahasi diantaranya

- validasi input huruf saja , dengan menggunakan HTML5, kita bisa membatasi akses inputan hanya berupa huruf
- validasi nomor / angka saja , dengan HTML5 , kita bisa memberikan akses input hanya angka / nomor

untuk yang lain.. yuk kita simak tutorial dibawah ini :

• Validasi Form dengan Disabled Tombol Submit Form
• Cara Validasi URL dengan PHP
• Validasi Form dengan Javascript dan Menampilkan Pesan Error di Form
• Validasi Upload Gambar dengan HTML5

Cara Validasi FORM Dengan Menggunakan HTML5

Beberapa tipe validasi form dengan HTML 5 yang harus anda ketahui yaitu :

validasi huruf saja dengan HTML5

1.  Letters
pattern="[A-Za-z]+" accepts only capital or small letters. , ya ,, bisa digunakan  untuk validasi karakter saja berupa huruf kecil dan basar.

<form>
<input type="text" pattern="[A-Za-z]+" title="letters only" required />
<input type="submit" />
</form>

Baca Juga

• Simple Autocomplete PHP MYSQL HTML5
• HTML5 datalist

Validasi Nomor / angka saja dengan HTML5

2. numbers :
pattern="[0-9]+" accepts only numbers 0, 1, 2....  ..., validasi ini memungkinkan inputan berupa angka numerik

<form>
<input type="text" pattern="[0-9]+" title="only letters" required />
<input type="submit" />
</form>

Validasi Email dengan HTML5

3. Email
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" accepts valid email address

<form>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="xyz@something.com" required />
<input type="submit" />
</form>

Validasi Password dengan HTMl5

4. Password
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" accepts one number one upper and lower case letters with 8 or more chars.

<form>
<input type="password" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required />
<input type="submit" />
</form>

Validasi Input URL dengan HTML5

5. URL
pattern="https?://.+" required title="http://ebsof.blogspot.com" accepts valid web url starting with http://.

<form>
<input type="url" name="website" pattern="https?://.+" required title="http://ebsof.blogspot.com" />
<input type="submit" />
</form>

Validasi Input No Handphone / Telephone Dengan HTML5

6. Phone No
pattern="^\d{12}$" accepts only numeric values with 12 digit.

<form>
<input type="tel" pattern="^\d{12}$" title="12 numeric characters only" required />
<input type="submit" />
</form>

Validasi Gabungan angka dan number dengan HTML5

7. Alpha Numerik
pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" accepts alphanumeric values letters and digits.

<form>
<input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" title="alphanumeric 6 to 12 chars" />
<input type="submit" />
</form>

 Code diatas dapat anda implementasikan untuk validasi Fom dengan HTML5, untuk validasi type file image anda dapat membaca artikel saya Validasi Upload Gambar dengan HTML5