Validasi Formulir Menggunakan Javascript
Validasi Formulir
Menggunakan Javascript
Assalamualaikum wr wb
Pada postingan kali ini saya akan berbagi, bagaimana caranya agar formulir yang dibuat menggunakan HTML dan PHP dapat menerima inputan berupa data yang valid. Misalnya "Nama" harus menerima inputan hanya berupa huruf (tidak boleh angka) dan sebaliknya "NIM" harus menerima inputan berupa angka (tidak boleh huruf atau karakter). Selain itu juga formulir yang diinputkan harus lengkap tidak boleh ada yang kosong, jika ada form yang belum terisi maka akan ada peringatan saat menginputkan.
Caranya adalah, kita harus membuat kondisi yang mengimplementasikan hal hal diatas menggunakan javascript.
Jika user menginputkan nama bukan berupa huruf, namun angka atau karakter tertentu. Maka seperti contoh gambar dibawah, akan ada sebuah peringatan agar user membenarkanya.
![]() |
Jika nama yg diinputkan terdapat unsur angka/karakter. |
![]() |
Jika NIM yg diinputkan terdapat unsur huruf. |
![]() |
Jika form tidak terisi. |
Agar program dapat menjalankan itu maka harus dibuat kondisi untuk memvalidasi inputan menggunakan javascript. Simpelnya script bisa di letakkan di dalam head pada html atau di dalam body sebelum <form>.
Berikut adalah script validitas formulir diatas (javascript):
<script type="text/javascript">
function validasi(){
var namaValid = /^[a-zA-Z]+(([\' '\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/;//kondisi Nama harus berupa huruf
var nama = formulir.nama.value;
var nimValid = /^[0-9]+$/;//kondisi NIM harus berupa angka
var nim = formulir.nim.value;
var alamat = formulir.alamat.value;
var gender = formulir.gender.value;
var pesan = ' ';
if(nama==' '){//kondisi untuk jika Nama kosong/tidak disi maka akan ada peringatan
pesan = 'Nama harus diisi\n';
}
if(nama != ' ' && !nama.match(namaValid)){//memanggil kondisi var nimValid
pesan += 'Nama tidak valid\n';
}
if(nim==' '){//kondisi untuk jika NIM kosong/tidak disi maka akan ada peringatan
pesan += 'NIM anda harus diisi\n';
}
if(nim !=' ' && !nim.match(nimValid)){//memanggil kondisi var nimValid
pesan += 'NIM HARUS BERUPA ANGKA!\n';
}
if(alamat == ' '){//kondisi untuk jika Alamat kosong/tidak disi maka akan ada peringatan
pesan += 'Alamat harus diisi\n';
}
if(gender == ' '){//kondisi untuk jika Jenis Kelamin tidak dipilih maka akan ada peringatan
pesan += 'Jenis kelamin harus dipilih\n';
}
if(pesan != ' '){//kondisi untuk menampilkan pesan
alert('Ada kesalahan pada pengisisan formulir : \n'+pesan);
return false;
}
return true;
}</script>
<script type="text/javascript">
function validasi(){
var namaValid = /^[a-zA-Z]+(([\' '\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/;//kondisi Nama harus berupa huruf
var nama = formulir.nama.value;
var nimValid = /^[0-9]+$/;//kondisi NIM harus berupa angka
var nim = formulir.nim.value;
var alamat = formulir.alamat.value;
var gender = formulir.gender.value;
var pesan = ' ';
if(nama==' '){//kondisi untuk jika Nama kosong/tidak disi maka akan ada peringatan
pesan = 'Nama harus diisi\n';
}
if(nama != ' ' && !nama.match(namaValid)){//memanggil kondisi var nimValid
pesan += 'Nama tidak valid\n';
}
if(nim==' '){//kondisi untuk jika NIM kosong/tidak disi maka akan ada peringatan
pesan += 'NIM anda harus diisi\n';
}
if(nim !=' ' && !nim.match(nimValid)){//memanggil kondisi var nimValid
pesan += 'NIM HARUS BERUPA ANGKA!\n';
}
if(alamat == ' '){//kondisi untuk jika Alamat kosong/tidak disi maka akan ada peringatan
pesan += 'Alamat harus diisi\n';
}
if(gender == ' '){//kondisi untuk jika Jenis Kelamin tidak dipilih maka akan ada peringatan
pesan += 'Jenis kelamin harus dipilih\n';
}
if(pesan != ' '){//kondisi untuk menampilkan pesan
alert('Ada kesalahan pada pengisisan formulir : \n'+pesan);
return false;
}
return true;
}</script>
Untuk HTML nya diletakkan di dalam <body> dibawah script validitas diatas.
Untuk script HTML nya adalah sebagai berikut :
<h1>formulir</h1>
<table border="1" class="border">
<td>
<form name="formulir" action="form0012.php" onsubmit="return validasi()" method="POST" >
<table>
<tr>
<td><b>Nama<b></td>
<td><input type="text" name="nama" size="22" placeholder="ex: Paijo" class="kotak"></td>
</tr>
<tr>
<td><b>NIM<b></td>
<td><input type="text" name="nim" size="22" placeholder="ex: 1600018001" class="kotak"></td>
</tr>
<tr>
<td><b>Alamat<b></td>
<td><textarea name="alamat" rows="5" cols="50" class="kotak"></textarea></td>
</tr>
<tr>
<td><b>Jenis Kelamin<b></td>
<td>
<select name="gender" class="kotak">
<option value="">-Pilih-</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
</table>
</td>
</table>
<br>
<center>
<input type="submit" value="Inputkan" name="submit">
<input type="reset" value="Muat Ulang" name="reset">
<center>
</form>
<h1>formulir</h1>
<table border="1" class="border">
<td>
<form name="formulir" action="form0012.php" onsubmit="return validasi()" method="POST" >
<table>
<tr>
<td><b>Nama<b></td>
<td><input type="text" name="nama" size="22" placeholder="ex: Paijo" class="kotak"></td>
</tr>
<tr>
<td><b>NIM<b></td>
<td><input type="text" name="nim" size="22" placeholder="ex: 1600018001" class="kotak"></td>
</tr>
<tr>
<td><b>Alamat<b></td>
<td><textarea name="alamat" rows="5" cols="50" class="kotak"></textarea></td>
</tr>
<tr>
<td><b>Jenis Kelamin<b></td>
<td>
<select name="gender" class="kotak">
<option value="">-Pilih-</option>
<option value="Laki-Laki">Laki-Laki</option>
<option value="Perempuan">Perempuan</option>
</select>
</td>
</tr>
</table>
</td>
</table>
<br>
<center>
<input type="submit" value="Inputkan" name="submit">
<input type="reset" value="Muat Ulang" name="reset">
<center>
</form>
Sedangkan untuk proses formulirnya digunakan php untuk mengolah inputan lalu dioutputkan di halaman lain.
Demikian penjelasan yang sangat singkat dari saya, semoga bermanfaat untuk saudara saudara sekalian. Terimakasih telah berkunjung.
Wassalamualaikum wr wb
Artikelnya mantap Kak. Penjelasannya juga singkat dan mudah dimengerti. Saya mau kasih sedikit saran aja kak, tolong tambahkan sintaks membuat validasi untuk combobox.Terimakasih kak. Di tunggu artikel selanjutnya ya . Perkenalkan nama saya Tessa Hervika ayo kunjungi website kampus saya https://www.atmaluhur.ac.id/
BalasHapuswess artikelnya bagus sekali. penjelasan didalam artikel ini dapat dipahami dan mudah dimengerti. terima kasih admin atas artikelnya. semoga kedepanya sukses selalu.
BalasHapusPerkenalkan nama saya Jheny sandella , ayo kunjungi website kampus saya
https://www.atmaluhur.ac.id/
Alhamdulillah...makasih banyak kakak artikelnya,
BalasHapusDengan ada nya artikel dari kakak ini, saya menjadi lebih tau dan lebih paham bagaimana cara membuat validasi formulir menggunakan javascript, dan artikel kakak ini sangat mudah untuk dimengerti,
Terus bikin artikel ya kakak. sukses selalu ...
Perkenalkan nama saya Eva maulani.
Website kampus saya di https://www.atmaluhur.ac.id/
Kereen kak, Artikel "Validasi Form Html dengan Javascrip" sangat mudah dipahami. Terutama bagi saya yang pemula ini. Apakah masih ada validasi-validasi yang lain kak? kalo ada mohon ditambahkan supaya lebih lengkap kak
BalasHapusditunggu artikel selanjutnya kak...
perkenalkan saya Mutia Amirah Rahim, Ayo Kunjungi Website Kampus Saya https://www.atmaluhur.ac.id/
Makasih banyak kak artikelnya. Artikel ini sangat bermanfaat bagi saya dan orang lain tentang bagaimana cara membuat validasi formulid html dengan javascript. semoga kedepannya kakak bisa membuat artikel bermanfaat lainnya. terimakasih kak, semoga kedepannya makin sukses yaa.
BalasHapusDitunggu artikel selanjutnya kak...
Perkenalkan nama saya Meilianda Aryanti Abelia, Kunjungi website kampus saya https://www.atmaluhur.ac.id/
Terimakasih artikel yang membahas validasi formulid html dengan javascript.
BalasHapusdari beberapa artikel yang sempat saya kunjungi dan saya baca masih banyak penulisan, bahasa, dan penyajian dalam menjelaskan suatu materi yang rumit untk dipahami..smg kakak trs brkrya untk membuat artikel yg bermanfaat lainnya
Perkenalkan nama saya,ernita resva julina
Kunjungi web kampus saya https://www.atmaluhur.ac.id
Hi Min.. artikelnya sangat membantu sekali bagi sipemula seperti saya ini yang baru belajar tentang validasi formulid html dengan javascript. sukses dan semangat selalu ya Min perkenalkan nama saya Margiana Rahayu kunjungi website kampus saya https://www.atmaluhur.ac.id/
BalasHapusartikelnya bagus kakak,,
BalasHapusDengan ada nya artikel dari kakak ini, saya menjadi lebih tau dan lebih paham bagaimana cara membuat validasi formulir menggunakan javascript, dan artikel kakak ini sangat mudah untuk dimengerti,
Terus bikin artikel ya kakak. sukses selalu ..Nama:HENA MITRIANI,NIM:1922500189,Kelompok: SI2k.
https://www.atmaluhur.ac.id/
Keren min artikelnya trimakasih atas ilmunya min, Nama saya Rizky Pratama dgn NIM 1922500005 kelompok SI2K, Dari stmik atmaluhur, link kampus saya : https://www.atmaluhur.ac.id
BalasHapusReply
BalasHapusterima kasih banyak ya kakak untuk artikelnya.dengan ini saya dapat belajar bagaimana cara membuat validasi formulir.dan artikel ini sangat mudah dimengerti.sukses selalu ya kak...ditunggu artikel selanjutnya..
Perkenalkan nama saya Lailatul marfu'ah
Kunjungi website kampus kami https://www.atmaluhur.ac.id/
Terima kasih ya kak udah bikin artikel ini.Berkat artikel yang kakak buat,saya jadi paham bagaimana cara membuat validasi formulir.Artikel yang kakak buat ngak bikin ribet,trus mudah dimengerti...
BalasHapusSekali lagi makasih ya kak,atas artikelnya...saya tunggu artikel selanjutnya..
Oh ya kak..perkenalkan nama saya Sawalia Safitri kunjungi website kampus kami https://www.atmaluhur.ac.id/
Allhamdulillah..Terimakasih artikelnya kak..
BalasHapusTentang validasi formulir menggunakan javascript..
Dengan adanya artikel ini saya menjadi tau dan lebih paham.
Artikelnya juga mudah untuk dimengerti.Terus berkarya kak.
Ditunggu artikel kakak selanjutnya.
Perkenalkan nama saya ADEKA SRI PURWANTI.website kampus kami https://www.atmaluhur.ac.id/
mantap kali kak artikelnya . sangat membantu saya bagi pemula sangat bermanfaat terus bekarya kak dan semangat untuk membuat artikelnya,artikelnya mudah dipahami dan dimegerti. perkenalkan nama saya ulfa maryanti website kampus saya https://www.atmaluhur.ac.id/
BalasHapusHi kak.. artikelnya sangat bagus sekali kak dan membantu kami bagi sipemula seperti saya ini yang baru belajar tentang validasi formulir html dengan javascript. Semoga kedepannya dapat memberikan ilmu baru dan cara baru tentang HTML yang lebih, dan dapat dimengerti dengan cepat ya kak hehe....Sukses dan semangat selalu ya kak... Perkenalkan nama saya Derma Anzeny, website kampus saya https://www.atmaluhur.ac.id/
BalasHapusAlhamdulillah trimakasih kak atas argikelnya .
BalasHapusDengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
https://www.atmaluhur.ac.id/
Alhamdulillah trimakasih kak atas argikelnya .
BalasHapusDengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
https://www.atmaluhur.ac.id/
Alhamdulillah trimakasih kak atas argikelnya .
BalasHapusDengan ini saya dapat belajar bagaimana cara membuat validasi formulir. Artikel ini sangat bermanfaat dan mudah di pahami.
Perkenalkan nama saya Nuzul syafitri,, kunjungi website kampus kami
https://www.atmaluhur.ac.id/
Terimakasih kak artikelnya sangat bagus dan berguna bagi saya, karena sebelumnya saya belum mengetahui bagaimana cara membuat validasi formulir,setelah melihat artikel dari kakak saya jadi bisa.sengat dalam berkarya dan sukses selalu,semoga artikel ini juga berguna bagi teman-teman yang lainnya.perkanalkan nama saya Wendi sepriyadi,kunjungi
BalasHapusWebsite kampus saya
https://www.atmaluhur.ac.id/
Terimakasih min atas artikel yang admin buat, artikelnya sangat berguna bagi saya,dengan ada nya artikel ini saya bisa tau bagaiman cara membuat validasi formulir, perkenalkan nama saya Tahmi, website kampus kami
BalasHapushttps://www.atmaluhur.ac.id/
Waahhh...... Teriamakasih min artikel yg admin buat,artikel sangat berguna bagi saya.
BalasHapusDengan ada artikel ini saya bisa tau bagaimana cara membuat validasi formulir,semoga artikel ini berguna bagi teman" yang lainnya ,perkenalkan nama saya fauzan website kampus saya https://www.atmaluhur.ac.id/
Terimakasih kak atas artikel yang kakak buat, artikelnya sangat berguna bagi saya,dengan ada nya artikel ini saya bisa tau bagaiman cara membuat validasi formulir, perkenalkan nama saya Ardo Jordi Setiawan , website kampus kami
BalasHapushttps://www.atmaluhur.ac.id/
thank you min, the article is quite useful for me who are just learning about this material. here I can find out how to make html form validation with javascript. especially for me who was studying in the computer section, this article really helped me and could help a lot of people too. hopefully in the future the admin can make other useful articles. thank you min, I hope that in the future the admin will be more successful, introduce my name, Teddy Kurnia Harfian, please visit my campus website https://www.atmaluhur.ac.id/
BalasHapusTerimakasih kak, artikel yang kakak buat sangat bermanfaat untuk saya yang sedang belajar cara membuat validasi formulir, semangat terus kak. Perkenalkan nama saya Ranum Fatwa Aulia, NIM 1922500033, kunjungi website kampus saya di https://www.atmaluhur.ac.id/
BalasHapusterimakasih kak bagus sekali bermanfaat terus berkarya kak di tunggu juga artikel selanjut nya
BalasHapussemangat kak menebarkan kebaikan dan membagikan ilmu
nama : muhammad nugie cesarianto
nim : 1922500200
kelompok : SI 2 K
alamat web : https://mahasiswa.atmaluhur.ac.id/
salam budi luhur