Validasi nomor telepon dengan HTML

1
Validasi nomor telepon dengan HTML

Penting untuk berhati-hati saat mengumpulkan data dari pengguna. Validasi data form diperlukan sebelum dimasukkan ke database. Validasi sisi klien lebih user-friendly daripada sisi server. Kamu bisa menerapkan validasi form sisi klien dengan mudah dengan HTML5 tanpa menggunakan jQuery. Di sini saya akan menunjukkan cara mengintegrasikan validasi nomer telepon dengan HTML5.

Untuk memvalidasi nomor telepon dengan regular expression (regex), kita akan menggunakan atribut type dan pattern di kolom input HTML.

Validasi nomor telepon dengan Pattern

Contoh kode berikut akan memvalidasi nomor telepon dan memeriksa apakah pengguna memberikan nomor telepon dengan format yang benar (xxx-xxx-xxxx).

<form>
  No. Telp. (format: xxx-xxx-xxxx):
  <input type="tel" pattern="^\d{3}-\d{3}-\d{4}$" required >
  <input type="submit" value="Submit">
</form>

Regex untuk nomor HP 10 Digit

Contoh kode berikut akan memeriksa apakah pengguna memberikan nilai numerik 10 digit (xxxxxxxxxx).

<form>
  No. HP (format: xxxxxxxxxx):
  <input type="tel" pattern="^\d{10}$" required >
  <input type="submit" value="Submit">
</form>

Bonus: Cara membuat nomor telepon yang dapat diklik di perangkat mobile

Sebagian besar situs-situs bisnis menempatkan nomor kontak mereka di situs mereka. Nomor telepon yang dapat diklik sangat berguna saat pengguna menjelajah situs web dari perangkat mobile. Link Click-To-Call akan membantu untuk menghubungi nomor telepon langsung dari situs web dengan satu klik.

Dengan menggunakan hyperlink tel:, kamu dapat dengan mudah membuat nomor telepon yang dapat diklik. Di atribut href, tambahkan tel: dan masukkan nomor telepon dengan awalan kode negara.

Tag anchor berikut menambahkan nomor telepon hyperlink untuk browsing mobile. Pengguna bisa memulai panggilan telepon hanya dengan mengklik link nya.

<a href="tel:+6285111222069">85111222069</a>

+62 adalah kode negara Indonesia dan nomor teleponnya adalah 85111222069.

BAGIKAN

1
Leave a Reply

avatar
400
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
andriyanto Recent comment authors
  Subscribe  
terbaru terlama vote teratas
Beritahu
andriyanto
Tamu
andriyanto

Berjalan di browser apa min