Jumat, 29 Juni 2012

Pemrograman Web : Validasi Input Angka Numeric, Kosong dan Email dengan Javascript

Sering sekali kita harus membuat validasi untuk input data di web, entah itu untuk memberikan peringatan jika sebuh isian belum diisi atau validasi isi dari inputan misal apakah sudah dalam bentuk angka atau sudah dalam format email yang benar dsb.

Ini adalah beberapa contoh validasi input, contoh pertama adalah fungsi untuk validasi input jika masih kosong :

<script type="text/javascript">
function cek()
{
if (document.getElementById("nama").value == '')
{
alert("Nama Belum Diisi");
return false;
}
if (isNaN(document.getElementById("no_telp").value))
{
alert("Nomor Telepon Harus Angka");
return false;
}
return true;
}
</script>



Penggunaannya :

<input name="submit" type="submit" id="submit" value="Simpan" onclick="return cek();" />

Di bawah ini javascript untuk mengecek apakah sebuah input adalah anga numeric atau bukan :

<script language="javascript">
function cekangka(input)
{
if (isNaN(input)){
alert('bukan angka');
  return false;
}
else
{
alert('angka');
  return true;
}
}

Kalau contoh ini malah sebaliknya, yaitu untuk mengecek sebuah input tidak boleh memakai angka, harus murni kata (kalimat) tanpa angka :

function NotNumeric(input){
    //var RE = /^-{0,1}\d*\.{0,1}\d+$/;
    //return (RE.test(input));
var strLength = input.length;

var i;
for (i=0;i<strLength;i++)
{
if (input.charAt(i) == '0') { return false; }
if (input.charAt(i) == '1') { return false; }
if (input.charAt(i) == '2') { return false; }
if (input.charAt(i) == '3') { return false; }
if (input.charAt(i) == '4') { return false; }
if (input.charAt(i) == '5') { return false; }
if (input.charAt(i) == '6') { return false; }
if (input.charAt(i) == '7') { return false; }
if (input.charAt(i) == '8') { return false; }
if (input.charAt(i) == '9') { return false; }
}
return true;
}
</script>

Sedangkan ini adalah contoh javascript untuk validasi atau mengecek email menggunakan javascript regex:

function validate(form_id,email) {
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   var address = document.forms[form_id].elements[email].value;
   if(reg.test(address) == false) {
      alert('Invalid Email Address');
      return false;
   }
}

Ini contoh validasi email tanpa menggunakan regex, dengan algoritma biasa :

function validateForm()
{
var x=document.forms["myForm"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }
}

Semoga manfaat