Form Validation Javascript

Form validation digunakan untuk memeriksa apakah data yang dimasukkan oleh visitor pada form telah benar atau tidak.

Beberapa penggunaan form validation yaitu:

  • Memeriksa apakah input yang diberikan sudah ada isinya atau kosong.
  • Memeriksa apakah input yang diberikan berupa angka.
  • Memeriksa apakah input yang diberikan berupa huruf.
  • Memeriksa apakah input yang diberikan berupa kombinasi huruf dan angka.
  • Memeriksa apakah input jumlah character yang diberikan sudah sesuai (Digunakan untuk membatasi jumlah character password yang bisa digunakan).
  • Memeriksa apakah pilihan yang diberikan sudah dipilih (drop down selector).
  • Memeriksa apakah input alamat email sudah benar.
  • Memeriksa semua input yang ada diatas sudah diinput.

Tutorial kali ini agak sedikit panjang. Lihat kembali Form HTML bila kamu memerlukan dasar-dasar membuat form.

Non-empty input

Berikut ini adalah contoh script untuk memeriksa apakah input yang diberikan ada isinya atau tidak. Jika input ada isinya maka data akan disubmit sedangkan jika input kosong maka visitor akan disuruh untuk melengkapi data.

Code JavaScript non-empty:

// 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;
}

Code notEmpty() function akan memeriksa apakah ada sesuatu atau tidak pada input HTML.

Code elem adalah text input.

String pada JavaScript memiliki berbagai macam property. Salah satunya adalah length property yang berfungsi untuk menghitung jumlah character yang ada pada string.

Code elem.value.length akan memeriksa seberapa panjang string yang ada.

Selama elem.value.length tidak sama dengan nol maka notEmpty() function hasilnya adalah True dan data akan langsung disubmit. Sebaliknya jika elem.value.length sama dengan 0 maka notEmpty() function akan memberikan alert kepada visitor mengenai adanya kesalahan dalam memberikan data.

Code HTML dan JavaScript non-empty:

<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='Submit' />
</form>

Hasil code HTML dan JavaScript non-empty:

Required Field:

Numbers input

Script berikut ini bisa digunakan untuk memastikan visitor memasukkan input berupa angka atau tidak. Kamu bisa menggunakan script ini pada form seperti credit card, nomor telephone, zip code, dan yang lainnya.

Cara paling cepat dalam memeriksa apakah input string value berupa angka atau tidak adalah dengan menggunakan regular expression /^[0-9]+$/ yang akan cocok bila semua string berupa angka dan setidaknya input memiliki satu character string.

Regular expression tidak akan dibahas pada tutorial kali ini karena penjelasannya agak panjang.

Code JavaScript numbers:

// If the element's string matches the regular expression it is all numbers
function isNumeric(elem, helperMsg){
   var numericExpression = /^[0-9]+$/;
   if(elem.value.match(numericExpression)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}

match() function akan memeriksa apakah string berupa angka atau tidak. Kita akan menggunakan match() function seperti ini: elem.value.match().

Supaya elem.value.match() function mengetahui bahwa string berupa angka atau tidak maka kita memerlukan regular expression yang akan kita simpan dalam numericExpression variable.

Jika elem.value.match() function berupa angka maka hasilnya adalah True sehingga isNumeric() function akan menghasilkan True juga.

Namun jika ada selain angka dalam string input maka script akan menampilkan alert(helperMsg) dan menghasilkan False.

Code HTML dan JavaScript numbers:

<script type='text/javascript'>
function isNumeric(elem, helperMsg){
   var numericExpression = /^[0-9]+$/;
   if(elem.value.match(numericExpression)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
</script>
<form>
Numbers Only: <input type='text' id='numbers1'/>
<input type='button' onclick="isNumeric(document.getElementById('numbers1'), 'Numbers Only Please')" value='Submit' />
</form>

Hasil code HTML dan JavaScript numbers:

Numbers Only:

Letters input

Script untuk memeriksa huruf hampir sama dengan angka. Yang berbeda adalah pada regular expression yang digunakan yaitu /^[a-zA-Z]+$/.

Kali ini kita akan menggunakan regular expression yang akan memeriksa apakah input berupa huruf ataupun tidak. Huruf yang diijinkan adalah huruf besar dan huruf kecil.

Code JavaScript letters:

// If the element's string matches the regular expression it is all letters
function isAlphabet(elem, helperMsg){
   var alphaExp = /^[a-zA-Z]+$/;
   if(elem.value.match(alphaExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}

Code HTML dan JavaScript letters:

<script type='text/javascript'>
function isAlphabet(elem, helperMsg){
   var alphaExp = /^[a-zA-Z]+$/;
   if(elem.value.match(alphaExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
</script>
<form>
Letters Only: <input type='text' id='letters1'/>
<input type='button' onclick="isAlphabet(document.getElementById('letters1'), 'Letters Only Please')" value='Submit' />
</form>

Hasil code HTML dan JavaScript letters:

Letters Only:

Numbers and letters input

Kita bisa menggabungkan isAlphabet function dan isNumeric functions menjadi satu function untuk memeriksa apakah input hanya mengandung angka atau huruf dan bukan character lainnya.

Code JavaScript numbers and letters:

// If the element's string matches the regular expression it is numbers and letters
function isAlphanumeric(elem, helperMsg){
   var alphaExp = /^[0-9a-zA-Z]+$/;
   if(elem.value.match(alphaExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}

Length input

Membatasi banyaknya jumlah character yang boleh dimasukkan ke dalam input merupakan salah satu cara untuk menghindari buruknya data. Sebagai contoh, kita mengetahui no kode pos terdiri dari lima angka sehingga bila visitor hanya memasukkan dua buah angka maka nomor kode posnya pasti salah.

Pada code di bawah ini kita akan membuat sebuah function bernama lengthRestriction(). Function ini terdiri dari tiga bagian. Yang pertama adalah data string, yang kedua adalah jumlah minimum character yang boleh dimasukkan, dan yang ketiga yaitu jumlah maksimum character yang boleh dimasukkan ke dalam input.

Jika kamu menginginkan jumlah character input yang pasti maka kamu bisa memasukkan jumlah minimum sama dengan maksimum.

Code JavaScript length:

<script type='text/javascript'>
function lengthRestriction(elem, min, max){
   var uInput = elem.value;
   if(uInput.length < min || uInput.length > max){
      alert("Please enter between " +min+ " and " +max+ " characters");
      elem.focus();
      return false;
   }else{
      return true;
   }
}
</script>

Di bawah ini adalah contoh function untuk input field yang membutuhkan 6 sampai 8 character.

Code HTML dan JavaScript length:

<script type='text/javascript'>
function lengthRestriction(elem, min, max){
   var uInput = elem.value;
   if(uInput.length < min || uInput.length > max){
      alert("Please enter between " +min+ " and " +max+ " characters");
      elem.focus();
      return false;
   }else{
      return true;
   }
}
</script>
<form>
Username(6-8 characters): <input type='text' id='restrict1'/>
<input type='button' onclick="lengthRestriction(document.getElementById('restrict1'), 6, 8)" value='Submit' />
</form>

Hasil code HTML dan JavaScript length:

Username(6-8 characters):

Input pilihan

Kita bisa menggunakan teknik berikut ini untuk memastikan bahwa visitor sudah memilih salah satu pilihan yang kita berikan pada sebuah dropdown menu HTML.

Pertama, buat berbagai macam pilihan, misalkan pilihan A, B, C, dll. Lalu tambahkan lagi satu pilihan [Please choose]. Buat secara default pilihan [Please choose] itu yang muncul pertama kali.

Bila visitor belum memilih pilihan yang kita berikan maka pilihan [Please choose] masih dipilih secara default. Sehingga bila pilihan [Please choose] masih terpilih maka kita bisa mengetahui bahwa visitor belum memberikan pilihannya.

Code JavaScript selection:

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
      alert(helperMsg);
      elem.focus();
      return false;
   }else{
      return true;
   }
}

Code HTML dan JavaScript selection:

<script type='text/javascript'>
function madeSelection(elem, helperMsg){
   if(elem.value == "Please Choose"){
      alert(helperMsg);
      elem.focus();
      return false;
   }else{
      return true;
   }
}
</script>
<form>
Selection: <select id='selection1'>
   <option>Please Choose</option>
   <option>Jabar</option>
   <option>Jateng</option>
   <option>Jatim</option>
</select>
<input type='button' onclick="madeSelection(document.getElementById('selection1'), 'Please Choose Something')" value='Submit' />
</form>

Hasil code HTML dan JavaScript selection:

Selection:

Email input

Kali ini kita akan membahas bagaimana memeriksa apakah visitor telah memberikan alamat email yang benar. Sebuah alamat email terdari dari 5 bagian:

  1. Kombinasi dari huruf, angka, titik, garis sambung, tambah, dan garis bawah.
  2. Simbol @.
  3. Kombinasi dari huruf, angka, garis sambung, dan titik.
  4. Titik
  5. Top Level Domain (com, net, org, us, gov, …).

Contoh benar:

  • juju.bandung@work.net
  • juju+bandung@work.com
  • juju-bandung@home.work.org

Contoh salah:

  • @work.com – tidak ada character sebelum symbol @.
  • dia!gue@kantor.com – invalid character !.
  • sepatu@jualan_ku.com – garis bawah tidak diperbolehkan dalam domain.

Untuk memeriksa alamat email yang benar maka kita akan membutuhkan sebuah regular expression seperti ini /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/.

Penjelasan mengenai regular expression ini agak panjang dan rumit sehingga tidak akan kita bahas pada tutorial kali ini. Namun kita bisa menggunakan regular expression tersebut untuk menguji coba script yang kita miliki berikut ini.

Code JavaScript email:

function emailValidator(elem, helperMsg){
   var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
   if(elem.value.match(emailExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}

Code HTML dan JavaScript email:

<script type='text/javascript'>
function emailValidator1(elem, helperMsg){
   var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
   if(elem.value.match(emailExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
</script>
<form>
Email: <input type='text' id='emailer1'/>
<input type='button' onclick="emailValidator1(document.getElementById('emailer1'), 'Not a Valid Email')" value='Submit' />
</form>

Hasil code HTML dan JavaScript email:

Email:

formValidator() function

Sebelum kita menggabungkan semua script diatas, kali ini kita akan membahas terlebih dahulu mengenai formValidator() function.

formValidator() function ini ini nantinya akan diisi oleh berbagai macam fungsi diatas. formValidator() sendiri berfungsi untuk mengatur mana dari fungsi di atas yang harus didahulukan sebelum data input disubmit.

Jika data 1 salah maka formValidator() akan berhenti disana dan akan memberi pesan bahwa data 1 salah.

Jika data 1 sudah benar maka formValidator() akan lanjut memeriksa data 2. Jika data 2 salah maka formValidator() akan berhenti disana dan akan memberi alert bahwa data 2 salah. Sedangkan jika data 1 dan 2 sudah benar maka formValidator() akan lanjut kepada data ke 3 dan seterusnya sampai data terakhir.

Pertama kita akan membuat susunan form HTML lengkap. Pada contoh dibawah ada 6 input yang kita buat dan akan kita validasi.

Code HTML form:

<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
Province: <select id='province'>
   <option>Please Choose</option>
   <option>DKI</option>
   <option>Jabar</option>
   <option>Jateng</option>
   <option>Jatim</option>
</select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' /><br />
</form>

Berikutnya adalah kita akan membuat kerangka formValidator() function.

Code JavaScript formValidator():

function formValidator(){
   // Make quick references to our fields
   var firstname = document.getElementById('firstname');
   var addr = document.getElementById('addr');
   var zip = document.getElementById('zip');
   var province = document.getElementById('province');
   var username = document.getElementById('username');
   var email = document.getElementById('email');
   // Check each input in the order that it appears in the form!
   if(isAlphabet(firstname, "Please enter only letters for your name")){
     if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
       if(isNumeric(zip, "Please enter a valid zip code")){
         if(madeSelection(province, "Please Choose a Province")){
           if(lengthRestriction(username, 6, 8)){
             if(emailValidator(email, "Please enter a valid email address")){
               return true;
             }
           }
         }
       }
     }
   }
   return false;
}

Pada bagian awal kita membuat beberapa variable untuk menyingkat code berikutnya supaya lebih mudah dibaca.

Pada code diatas ada susunan code if yang terus masuk kedalam. Code tersebut merupakan inti dari formValidator() yang kita miliki. Bila semua data True maka data baru bisa disubmit. Tetapi jika ada satu saja data yang tidak valid atau False maka semua data tersebut tidak bisa disubmit.

Perhatikan formValidator() function di atas yang merujuk hampir semua function yang telah kita buat dari awal. Teknik terpusat seperti ini memiliki beberapa kelebihan yaitu mudah dibaca dan kita bisa dengan mudah mengganti beberapa function yang kita mau nantinya.

All together

Sekarang saatnya kita menggabungkan semua function yang telah kita buat.

Code HTML dan JavaScript all:

<script type='text/javascript'>
function formValidator(){
   // Make quick references to our fields
   var firstname = document.getElementById('firstname');
   var addr = document.getElementById('addr');
   var zip = document.getElementById('zip');
   var province = document.getElementById('province');
   var username = document.getElementById('username');
   var email = document.getElementById('email');
   // Check each input in the order that it appears in the form!
   if(isAlphabet(firstname, "Please enter only letters for your name")){
     if(isAlphanumeric(addr, "Numbers and Letters Only for Address")){
       if(isNumeric(zip, "Please enter a valid zip code")){
         if(madeSelection(province, "Please Choose a Province")){
           if(lengthRestriction(username, 6, 8)){
             if(emailValidator(email, "Please enter a valid email address")){
               return true;
             }
           }
         }
       }
     }
   }
   return false;
}
function notEmpty(elem, helperMsg){
   if(elem.value.length == 0){
      alert(helperMsg);
      elem.focus(); // set the focus to this input
      return false;
   }
   return true;
}
function isNumeric(elem, helperMsg){
   var numericExpression = /^[0-9]+$/;
   if(elem.value.match(numericExpression)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
function isAlphabet(elem, helperMsg){
   var alphaExp = /^[a-zA-Z]+$/;
   if(elem.value.match(alphaExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
function isAlphanumeric(elem, helperMsg){
   var alphaExp = /^[0-9a-zA-Z]+$/;
   if(elem.value.match(alphaExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
function lengthRestriction(elem, min, max){
   var uInput = elem.value;
   if(uInput.length < min || uInput.length > max){
      alert("Please enter between " +min+ " and " +max+ " characters");
      elem.focus();
      return false;
   }else{
      return true;
   }
}
function madeSelection(elem, helperMsg){
   if(elem.value == "Please Choose"){
      alert(helperMsg);
      elem.focus();
      return false;
   }else{
      return true;
   }
}
function emailValidator(elem, helperMsg){
   var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
   if(elem.value.match(emailExp)){
      return true;
   }else{
      alert(helperMsg);
      elem.focus();
      return false;
   }
}
</script>
<form onsubmit='return formValidator()' >
First Name: <input type='text' id='firstname' /><br />
Address: <input type='text' id='addr' /><br />
Zip Code: <input type='text' id='zip' /><br />
Province: <select id='province'>
   <option>Please Choose</option>
   <option>DKI</option>
   <option>Jabar</option>
   <option>Jateng</option>
   <option>Jatim</option>
   </select><br />
Username(6-8 characters): <input type='text' id='username' /><br />
Email: <input type='text' id='email' /><br />
<input type='submit' value='Check Form' />
</form>

Hasil code HTML dan JavaScript all:

First Name:
Address:
Zip Code:
Province:
Username(6-8 characters):
Email:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>