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
Subscribe
Beritahu
guest
1 Comment
terlama
terbaru vote teratas
Inline Feedbacks
View all comments
andriyanto
andriyanto
November 8, 2017 16:12

Berjalan di browser apa min