Senin, 14 Mei 2018

Membuat Validasi Form Dengan Javascript


Codins - Terimakasih telah melanjutkan untuk membaca tutorial lanjutan dari tutorial sebelumnya yang berjudul Pengertian dan Contoh Penggunaan Event Pada Javascript. Pada artikel ini saya akan menulis sebuah tutorial untuk Membuat Validasi Form Dengan Javascript. Validasi adalah hal yang penting sebelum kita menginputkan data karena dengan validasi kita akan memastikan bila data yang diinputkan benar-benar sesuai dengan ketentuan yang kita tetapkan. Kali ini kita akan membuat validasi form sederhana menggunakan javascript.

Membuat Validasi Form Sederhana Dengan Javascript

Disini kita akan membuat sebuah form untuk menginputkan data mahasiswa dengan inputan berupa input text dan select. User akan ditampilkan form untuk mengisi nama mahasiswa, nomer induk mahasiswa, dan program studi mahasiswa. Untuk itu pertama buatlah sebuah file html baru dengan nama form.html, kemudian isikan sintaks dibawah ini kedalam file tersebut : 

form.html

Penjelasan Sintaks Diatas : 

  • Kita membuat event validasi pada onSubmit form yang kita buat, ini berarti ketika user mensubmit form akan dilakukan event function validasi
  • var nama : kita menerima inputan dari form kita dengan inputan ber id nama
  • var nim : menerima inputan dari form yang memiliki id nim
  • var prodi : menerima inputan dari form yang memiliki id prodi
  • var value_prodi : mengambil nilai (value) dari inputan bertipe select
  • if (nama!="".... : ini adalah proses validasi dengan logika if, jika nama tidak kosong, dan nim tidak kosong, dan value_prodi tidak sama dengan 0 maka akan return true atau menjalankan submit, jika ada data yang kosong akan memunculkan alert cek form, jangan ada yang kosong!
Jika kita menjalankan file diatas, maka akan tampil seperti screenshot yang ada dibawah ini :

Lalu isikan nama serta nim mahasiswa pada form diatas, untuk prodi coba untuk kita kosongi saja, saya akan mengisi seperti pada screenshot dibawah ini : 

Lalu klik tambah data, maka akan muncul pesan jangan kosongi form karena kita belum memilih program studi.


Kali ini cobalah untuk mengisi semua form diatas, ketika kita mengeklik tambah data maka proses validasi akan berhasil dengan mengembalikan nilai true. Semoga tutorial berjudul Membuat Validasi Form Dengan Javascript ini bermanfaat bagi anda. Terimakasih telah membaca!

Related Posts

Membuat Validasi Form Dengan Javascript
4/ 5
Oleh