Form Validation - Checking for Non-Empty Text

     Ini adalah cara yang biasa digunakan untuk pengesahan form. Pengunjung perlu memasukkan data dalam form yang di wajibkan oleh anda. Berikut adalah kod JavaScript untuk melakukan pemeriksaan asas ini untuk melihat jika input HTML yang diberikan adalah kosong atau tidak.

// If the length of the element's string is 0 then display helper message
function notEmpty(elem, helperMsg){
 if(elem.value.length == 0){
  alert(helperMsg);
  elem.focus(); // set the focus to this input
  return false;
 }
 return true;
}

     Fungsi notEmpty akan memeriksa  input HTML yang kita hantar sama ada ia ada data atau tidak. elem adalah input teks HTML yang akan hantar fungsi ini. JavaScriptstrings  sudah terdapat ciri-ciri built in, salah satunya ialah length property dimana ia akan mendapatkan length of the string. Sebahagian kod elem.value akan menarik length di dalam input dan dengan menambah kepada panjang elem.value.length kita boleh lihat berapa panjang string itu.

      Selagi elem.value.length bukan kosong, ia akan return true, sebaliknya kita akan hantar alert kepada pengguna dengan helperMsg untuk memberitahu mereka return false.

Working Example:

<script type='text/javascript'>
function notEmpty(elem, helperMsg){
 if(elem.value.length == 0){
  alert(helperMsg);
  elem.focus();
  return false;
 }
 return true;
}
</script>
<form>
Required Field: <input type='text' id='req1'/>
<input type='button' 
 onclick="notEmpty(document.getElementById('req1'), 'Please Enter a Value')"
 value='Check Field' />
</form>

Required Field:

Published on
29/10/2013 20:14
by izzat