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

16 komentar

27 Maret 2020 21.11 delete

Malam kak... Terimakasih kak artikelnya sangat bermanfaat kak untuk saya lebih mudah mengetahui lebih dalam tentang cara bagaimana membuat validasi form html menggunakan javascript, dan sangat membantu sekali untuk proses belajar pengkoding kak.
Terus berkarya dan suksek selalu kak.
Nama : Roki Abdul Jalil
Nim. : 19225000193
Kelompok : SI2K
Link kampus : https://www.atmaluhur.ac.id/

Reply
avatar
3 April 2020 17.01 delete

Sore kak....
Postingan kakak sangat membantu saya dalam belajar membuat validasi form HTML menggunakan JavaScript. Untuk itu saya sangat berterima kasih banyak sama kakak. Saya harap postingan ini juga dapat membantu untuk mereka yg ingin belajar seperti saya.
Perkenalkan nama saya Merlyn Gebhyanti NIM 1922500191 dan link kampus saya https://www.atmaluhur.ac.id

Reply
avatar
30 Mei 2021 21.57 delete

Artikelnya bagus dan sangat bermanfaat bagi saya yg sedang belajar membuat validasi form html menggunakan JavaScript, terimakasih kak, berkat artikel ini saya dapat ilmu baru dalam belajar desain pemograman web, semoga admin bisa membuat artikel lain nya yg bermanfaat terutama bagi pemula seperti saya
Perkenalkan saya Fauziah syafarina, Nim : 2022500128
Kunjungi web kampus saya
Https://www.atmaluhur.ac.id

Reply
avatar
31 Mei 2021 18.40 delete

muhammad akbar
May 31, 2021 at 4:38 AM
seblumnya,saya sempat bingung dalam belajar membuat web dengan java script formulir tapi alhamdulilah setelah saya melihat web ini dengan berbagai tutorial nya saya jadi mudah untuk mempelajari dan mempraktekan nya di rumah dan sekarang saya mulai terbiasa dengan bahasa pemograman java script formulir ,untuk admin terimakasih dan terus berikan yang terbaik untuk membaca,karena sungguh artikel ini sangat berguna bagi pemula seperti saya.
perkenalkan saya Muhammad akbar
silahkan kunjungi website kampus saya di link ini

https://www.atmaluhur.ac.id/

Reply
avatar
1 Juni 2021 11.23 delete

Saya sangat berterimakasih,karna sbelumnya saya belum tau apa itu Java scrip,pas berkunjung di web ini Alhamdulillah sangat bisa membantu saya,sekali lagi terimakasih ya kak

SAYA RANDIKA
KUNJUNGI JUGA WEB SITE KAMPUS SAYA
https://www.atmaluhur.ac.id/

Reply
avatar
2 Juni 2021 18.06 delete

jika melihat artikel ini memiliki cara penyampaian yang cukup mudah dimengerti , Adapun hasil dari mengunjungi artikel ini saya dapat sedikit mengerti perihal bagaimana membuat validasi form HTML menggunakan javascript Semoga dengan adanya artikel ini saya bisa belajar dan terus berlatih agar bisa terus mendapatkan hasil yang lebih baik
Nurfatonah -2022500133-kelompok SI2K
https://www.atmaluhur.ac.id/

Reply
avatar
2 Juni 2021 20.53 delete

Terimakasih admin, dengan membaca artikel ini pengetahuan saya tentang html jadi bertambah... Terimakasih banyak karena telah berbagi pengetahuan... Saya fira karunia 1722500127 mahasiswa isb atmaluhur. Kunjungi juga webiste kampus saya https://www.atmaluhur.ac.id

Reply
avatar
3 Juni 2021 12.04 delete

alhamdulillah sekarang Saya lebih mudah untuk mempelajari dan memahami ya. terimakasih min dan terus berikan yang terbaik untuk para pembaca.
perkenalkan saya Jihan Jesica.

silahkan kunjungi website kampus saya di link di bawah ini :

https://www.atmaluhur.ac.id/

Reply
avatar
3 Juni 2021 13.24 delete

Siang Lurr... Terimakasih kak artikelnya sangat bermanfaat kak untuk saya lebih mudah mengetahui lebih dalam tentang cara bagaimana membuat validasi form html menggunakan javascript, dan sangat membantu sekali untuk proses belajar pengkoding kak.
Terus berkarya dan suksek selalu kak.
Nama : Achmad Reyhan Fazely
Nim. : 2022500155
Kelompok : SI2K
Link kampus : https://www.atmaluhur.ac.id/

Reply
avatar
3 Juni 2021 13.55 delete

Siang Kak... Terimakasih kak artikelnya sangat bermanfaat kak untuk saya lebih mudah mengetahui lebih dalam tentang cara bagaimana membuat validasi form html menggunakan javascript, dan sangat membantu sekali untuk proses belajar pengkoding kak.
Terus berkarya dan suksek selalu kak.
Nama : Donny Okta Sadeva
Nim. : 2022500153
Kelompok : SI2K
Link kampus : https://www.atmaluhur.ac.id/

Reply
avatar
3 Juni 2021 17.06 delete

hallo kak
terimakasih artikelnya sangat bermanfaat dan juga mengajarkan saya untuk belajar membuat validasi form html menggunakan JavaScript, semangat terus untuk menulis artikelnya supaya bisa mempermudah kami lagi dalam belajar, saya harap admin bisa menambah artikel yang lebih menarik lagi.
Perkenalkan nama saya ( Tasya Marisca - 2022500137 ) dan jangan lupa kunjungi web kampus saya di https://www.atmaluhur.ac.id

Reply
avatar
3 Juni 2021 19.58 delete Komentar ini telah dihapus oleh pengarang.
avatar
3 Juni 2021 20.00 delete

Selamat malam,
Terimakasih artikel membuat validasi pada form javascript-nya kak, artikelnya jelas, singkat, dan mudah dimengerti. Semangat untuk artikel selanjutnya kak. Perkenalkan Saya Elma - 2022500160 kunjungi juga website kampus kami di https://www.atmaluhur.ac.id

Reply
avatar
3 Juni 2021 20.18 delete

Hallo malam kak terimakasih artikel nya. Dengan ini bisa membantu dan menambah wawasan saya dalam mempelajari HTML. Tetap semangat ditunggu artikel selanjutnya kak. Saya Anggita mahasiswa isb atmaluhur kunjungi juga website kampus kami di https://www.atmaluhur.ac.id

Reply
avatar
3 Juni 2021 20.19 delete

Terimakasih atas artikel nya kak, sangat membantu saya dalam membuat validasi form html menggunakan javascript, semangat menulis ya kak ditunggu artikel-artikel berikut nya.
Salam kenal saya Sutia Dinarti
Nim : 2022500146
Kunjungi juga website kampus kami ya https://www.atmaluhur.ac.id/

Reply
avatar
3 Juni 2021 20.29 delete

Artikelnya cukup membantu kak, Terimakasih kak.
Ditunggu artikel-artikel terbaik selanjutnya.
Saya Egi Mulyaningsih mahasiswa dari ISB ATMA LUHUR PANGKALPINANG.
Kunjungi juga website kampus kami di www.atmaluhur.ac.id

Reply
avatar