Cara Cek Validitas URL (Aplikasi 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.

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

Masukkan URL

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.