loading

Cara Cek Validitas URL (URL Validator)

URL Validator

Cara cek URL valid (*) atau tidak ini diperlukan untuk banyak keperluan, yang paling sering adalah untuk memvalidasi form untuk isian yang berupa URL. Perlu divalidasi agar tidak usah diproses eksekusi dari script lanjutan jika syarat URL-nya tidak valid untuk menghindari error.

Proses validasi lebih efisien jika dilakukan di client, karena prosesnya sederhana, dan tidak perlu harus mengirimkan data ke server dahulu untuk proses, jadi kalau via PHP malah tidak efisien, makanya digunakan javascript.

Selain untuk form, bisa juga untuk melakukan otomatisasi link. Dari URL berbentuk text diubah menjadi link, agar hanya URL valid saja yang diubah. Cara Cek Validitas URL

Post ini sebenarnya hanya catatan saya saja, karena kalau proses javascriptnya gampang dibuat, namun untuk string regular expression-nya yang susah diingat, karena sampai sekarang malas belajar regex, mending cari saja bentuk jadinya di forum programming.

Bagi yang juga perlu script ini, monggo dipakai saja. Berikut ini fungsi pendek untuk validasi URL.

function isValidUrl( string ) {
  var regex = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/i;
  return regex.test( string );
}

Result atau hasil dari fungsi diatas adalah boolean, yaitu true atau false penggunaannya seperti dibawah ini:

if ( isValidUrl( url ) ) {
  // perintah jika url valid
} else {
  // perintah jika url tidak valid
}

Contoh hasil penerapan bisa pakai form dibawah ini:

URL Validator

Contoh URL tidak valid jika tidak menyertakan protocol host atau dalam URL mengandung karakter terlarang, misalnya spasi.

Mungkin ada yang ingin tahu kode dari form diatas sebagai contoh penggunaan fungsi, seperti dibawah ini:

HTML

<div class="panel-default panel fs-no-adjust">
  <div class="panel-heading text-center"><i class="fa fa-code"></i> <strong>URL Validator</strong></div>
  <div class="panel-body">
 <div class='input-group'>
   <input class="form-control" type="text" id="url-text" placeholder="Masukkan URL disini" />
   <div class='input-group-btn'>
    <button class="btn-primary btn" id="url-submit"><i class="fa fa-check-circle-o"></i> Cek</button>
   </div>
 </div>
  </div>
  <div class="panel-footer text-center"><span class="label-primary label" id="url-result">Masukkan URL</span></div>
</div>

Javascript dengan jQuery

$( '#url-submit' ).click( function( e ) {
  var a = $( '#url-text' ).val();
  if ( a === '' ) {
 $( '#url-result' ).text( 'Masukkan dulu URL' ).removeClass( 'label-primary' ).addClass( 'label-danger' );
 return;
  }
  if ( isValidUrl( a ) ) {
 $( '#url-result' ).text( 'URL Valid' ).removeClass( 'label-danger' ).addClass( 'label-primary' );
  } else {
 $( '#url-result' ).text( 'URL tidak Valid' ).removeClass( 'label-primary' ).addClass( 'label-danger' );
  }
});

Sekian dulu catatan kali ini.

Komentar 0

Popular Posts this Week

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Hari Selamatan Orang Meninggal (Perhitungan Online)

Aplikasi Perhitungan Hari Selamatan Orang Meninggal dibawah ini sangat berguna untuk orang jawa, karena di keluarga manapun tidak akan terl...

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Kamu Dari Cara Nyontek dan Perkerjaan Yang Cocok

Tipe Orang Menurut Cara Nyontek mungkin tidak menjadi salah satu ukuran dalam hal yang serius, tapi lumayan untuk menambah referensi dan m...

Koleksi Ucapan Selamat Tahun Baru 2018 Banyak Pilihan

Koleksi Ucapan Selamat Tahun Baru 2018 Banyak Pilihan

Tahun baru 2018 sudah akan segera menjelang, jadi persiapan menyediakan ucapan-ucapan tahun baru 2018, sehingga dengan banyaknya kumpulan uc...