Tutorial membuat form validasi dengan javascript agar lebih interaktif

Tutorial membuat form validasi dengan javascript agar lebih interaktif
Di Posting Oleh : wandi
Kategori : HTML javascript

Validasi sangat diperlukan dalam membuat sebuah aplikasi. Di pembahasan kali ini saya membagikan validasi mengenai validasi form. Mengapa validasi diperlukan ? tentu diperlukan, misalkan kita membuat sebuah aplikasi yang didalam formnya berisi nama, umur, alamat. Terus user sengaja ngisi formnya kosong. Maka hal tersebut bisa membuat fatal tentunya.

langsung kepembahasan. pertama tama kita buat HTML seperti di bawah.

<pre>

<form novalidate  pemilahan(this);"method="post">

<input type="text"placeholder="nama"/>

<input type="text"placeholder="umur"/>

<textarea placeholder="alamat"></textarea>

<input type="submit"value="submit"/>

</form>

</pre>

oke jadi ketika kita mengklik submit maka akan melakukan fungsi pemilahan(this) dan mengeper formnya . Bro kenapa pake return ? jadi return untuk mengembalikan nilai , kita akan mengembalikan jika semuanya sudah di isi maka akan return true dan jika ada yang tidak di ini maka akan mengembalikan nilai salah , jadi browsernya tidak di reload . Oke langsung aja kita buat fungsinya .

bagian javascript

function pemilahan(data){

 var status=true;

 var index=0;

 while(index<=2){

  if(data[index].value.trim().length<=0){

   data[index].style.borderColor="red";

   status=false;

   switch(index){

    case 0:

     alert("nama kosong");

     break;

    case 1:

     alert("umur kosong");

     break;

    case 2:

     alert("alamat kosong");

     break;

   }

  }else{

   data[index].style.borderColor="";

  }

  index++;

 }

 return status;

}

nah si status itu di sisi nilai awalnya adalah true dan jika ada yang tidak di ini maka kan , jadi false , lalu jika semua sudah di pilah mengembalikan nilai status . yang jika di isi semua akan status = true jika ada yang tidak maka return false.

Mau liat atau download source code aplikasi premium bisa disini.

Tweet