Assamualaikum wr.wb
Hai hai, kembali lagi bersama saya Gema Antika Hariadi cowok paling ganteng di universitas ahmad dahlan , hari ini saya akan membuat artikle dan juga masih termasuk tugas dari mata kuliah pemrograman web , hari ini judul artikel saya adalah "validasi form menggunakan javascript" .
Untuk validasi javascript ini saya menaruh <script>isi dari script</scripy> di dalam file.html , dalam artian saya tidak membuat file baru yang extensinya.jv , jadi disini ada dua file yaitu file html, dan file php.
Untuk lebih jelas di bawah ini ada gambar html yang saya buat, dan yang saya mau validasikan.
Gambar diatas adalah bentuk form yang harus di isi, yaitu nama, nim, alamat, jenis kelamin. jika kita isi semua itu maka akan dikirim ke file php, lihat gambar di bawah ini.
Jika sudah kita isi semua, dan menekan tombol kirim maka akan dikirim ke php, dan jika kita menekan batal maka semua itu isi didalam form itu akan hilang, lihat lah gambar dibawah ini.
Itulah hasil dari ketika kita memilih tombol kirim.
Tapi inti dari artikel ini bukan yang di atas itu karena saya sudah memposting pembahasan itu di artikel sebelumnya.
Dibawah ini saya akan membahas validasi nama, nim, alamat, dan jenis kelamin.
- Untuk Nama : nama harus di isi dengan HURUF, dan tidak boleh diisi dengan ANGKA, jika diisi dengan angka maka akan keluar peringatan "Nama tidak valid" dan jika kolom nama tidak diisi maka akan keluar peringatan "Nama tidak boleh kosong ".
- Untuk Nim : Nim harus diisi dengan angka, jika diisi dengan huruf maka akan keluar peringatan "Nim tidak valid" dan jika kolom nim tidak diisi maka akan keluar peringatan "Nim tidak boleh kosong"
- Untuk alamat : alamat harus diisi dan jika tidak diisi maka keluar peringatan "Alamat tidak boleh kosong"
- Untuk Jenis kelamin : jenis kelamin harus diisi dan jika tidak diisi maka akan keluar peringatan "jenis kelamin harus diisi".
Gambar diatas adalah gambar peringatan jika kita tidak isi kolom form diatas.
jika kita isi kolom form nama menggunakan angka dan kolom nim menggunkan huruf, dan alamat tidak di isi, dan jenis kelamin juga tidak diisi, maka akan keluar peringatan seperti di bawah ini.
ditas adalah peringatan yang keluar jika kita melanggar aturan yang ada.
- Dibawah ini adalah penjelasa tentang script yang dibutuhkan untuk membuat validasi diatas.
Pertama-tama kita deklarasikan dulu script javascriptnya seperti gambar diatas. menggunakan tag <script></script>, di dalam tag script kita deklarasikan nama variabel varibel yangsudah kita buat di FORM, dan kita memberikan kondisi kondisi seperti jika koloom nama tidak diisi maka akan keluar peringatan kolom nama tidak valid atau kolom nama tidak boleh kosong.
NP: mohon maaf kalau penjelasan saya tidak begitu bagus dikarenakan saya juga masih belajar hehe.
Kalau gambar diatas saya sudah jelaskan di artikel sebelumnya.
gambar di atas adalah script dari phpnya (sudah saya jelaskan di artikel sebelumnya)
- Dibawah ini adalah script script atau kode kode yang saya buat menggunakan html, php, dan javascrip.
- Kode html atau form.
<head><title>copyrigth gema antika hariadi</title></head>
<body>
<font face="arial">
<p align="center">FORM PENDAFTARAN</p>
<form name="formulir" action="1.1.php" method="post" onSubmit="return validasi()">
<table>
<tr>
<td>NAMA:</td>
<td><input type="text" name="nama" placeholder="contoh : gema" size=50></td>
<tr>
<td>NIM : </td><td><input type="text" name="nim" placeholder="contoh : 1600018xxx" size=50></td>
</tr>
<tr>
<td>ALAMAT : </td><td><textarea name=alamat placeholder="jln kusumanegara jogjakarta" cols=46 rows=5></textarea></td>
</tr>
<tr>
<td>JENIS KELAMIN :</td>
<td><select name="jk">
<option value="">Pilih</option>
<option value="laki-laki">Laki-Laki</option>
<option value="perempuan">Perempuan</option>
</select></td>
<tr>
<td></td>
<td><input type="submit" value="Kirim" name="submit"><input type="reset" value="Batal" name="reset"></td>
</tr>
</table>
</form>
</body>
</html>
2. script javasript, script ini ditaruh didalam html nya.
<script>
function validasi(){
var namaValid = /^[a-zA-Z]+(([\'\,\.\- ][a-zA-Z ])?[a-zA-Z]*)*$/;
var nimValid = /^[0-9]+$/;
var nama = formulir.nama.value;
var jeniskelamin = formulir.jk.value;
var alamat = formulir.alamat.value;
var nim = formulir.nim.value;
var pesan = '';
if(nim==""){
pesan += '=>Nim tidak boleh kosong\n';
}
if(!nim.match(nimValid)){
pesan += '=>Nim tidak valid\n';
}
if (alamat== ''){
pesan += '=>Alamat tidak boleh kosong\n';
}
if (nama == '') {
pesan += '=>Nama tidak boleh kosong\n';
}
if (nama != '' && !nama.match(namaValid)) {
pesan += '=>Nama tidak valid\n';
}
if (jeniskelamin == '') {
pesan += '=>Jenis kelamin harus dipilih\n';
}
if (pesan != '') {
alert('Maaf, ada kesalahan pengisian Formulir : \n'+pesan);
return false;
}
return true
}
</script>
3. script php, untuk file php sendiri kita gunakan extensi.php (sudah saya jelaskan di artikel sebelumnya)
<?
$nama = $_POST['nama'];
$nim = $_POST['nim'];
$alamat = $_POST['alamat'];
$jk = $_POST['jk'];
echo "selamat datang ".$nama." nim anda adalah ".$nim." anda berasal dari ".$alamat." dan jenis kelamin anda ".$jk;
?>
SEKIAN DAN TERIMAKASIH SUDAH MEMBACAR ARTIKEL SAYA, SEMOGA BERMANFAAT BAGI KITA SEMUA AAMIIN.
Terima kasih kak atas blog nya bagus kak blog nya buat saya paham tentang cara untuk membuat validasi pada form html dengan menggunakan javascript dan terus berkarya kak. Perkenalkan nama saya Andrian Antonius nim :1922500215 dan web kampus saya :https://www.atmaluhur.ac.id/
BalasHapus