Java Script Untuk Validasi Form

Java Script untuk validasi form input
25 Comments Posted by Almazari on November 1, 2011

Untuk yang pertama kali, saya ingin berbagi bagaimana cara menggunakan Java
Script untuk validasi form input, dengan berbagai jenis form. Validasi sendiri merupakan
suatu cara untuk mendapat kan data yang sebenarnya dari User yang mengisikan data pada
form yang di sediakan, ok langsung saja di bahas yuuk
Mencegah Inputan Kosong

Misalnya ada sebuah form katakanlah username, kita ingin user mengisikan data
(username nya) di sana dan tidak boleh kosong. Berikut Kode Form nya :
<form method="post" action="aksi.php" onsubmit="return
validasi_input(this)">
<p>Username: <input name="username" type="text"></p>
<p><input name="" type="submit" value="Submit"></p>
</form>
Pada form tersebut terdapat kode onsubmit=return validasi_input(this) , fungsinya

adalah ketika tombol Submit di klik maka akan menuju ke function validasi_input
pada JavaScript sebelum ke action=aksi.php, Berikut Kode JS nya, letakkan di atas
Form ya..
<script type="text/javascript">
function validasi_input(form){
if (form.username.value == ""){
alert("Username masih kosong!");
form.username.focus();
return (false);
}
return (true);
}
</script>
Ketika from dengan nama username valuenya == (kosong) maka akan muncul
alert Username masih kosong dan from username akan focus.
Membatasi Minimal Inputan

Gunakan form username diatas sebagai contoh, dan ganti JavaScriptnya menjadi
berikut
var mincar = 5;
if (form.username.value.length < mincar){
alert("Panjang Username Minimal 5 Karater!");
return (false);
}
return (true);
}
</script>
Jadi ketika isi dari form username panjangnya kurang dari 5, maka akan muncul alert
Panjang Username Minimal 5 Karakter
Minimal Inputan dan hanya Huruf atau Angka

Gunakan form username saja sebagai contoh, dan ganti JavaScriptnya menjadi berikut
pola_username=/^[a-zA-Z0-9\_\-]{6,100}$/;
if (!pola_username.test(form.username.value)){
alert ('Username minimal 6 karakter dan hanya boleh Huruf atau
Angka!');
return false;
}
return (true);
}
</script>
Validasi Pilihan Radio Button

Sebelumnya sediakan dulu form Radio Button, disini saya mencontohkan pilihan
untuk jenis kelamin, dimana user harus memilih laki-laki atau Perempuan. Berikut
kode formnya
<p>Jenis Kelamin: <input type="radio" name="jk" value="L">Laki-Laki
<input type="radio" name="jk" value="P">Perempuan</p>
</form>
Pada From tersebut masih terdapat kode onsubmit=return validasi_input(this),

Berikut Kode JS untuk fungsi tersebut
function check_radio(radio)
{
// memeriksa apakah radio button sudah ada yang dipilih
for (i = 0; i < radio.length; i++)
{
if (radio[i].checked === true)
{
return radio[i].value;
}
}
return false;
}
var radio_val = check_radio(form.jk);
if (radio_val === false)
{
alert("Anda belum memilih Jenis Kelamin!");
return false;
}
return (true);
}
</script>
Pada Fungsi validasi_Input terdatapat juga fungsi cek_radio yang fungsinya untuk
mengembalikan nilai True jika sudah ada yang terpilih dan False jika belum ada yang
terpilih.
Validasi Untuk Combobox

Seperti biasa sediakan sebuah form berType Combobox, saya mencotohkan pada
pilihan Agama, dimana user harus memilih salah satu dari agama, Berikut kode
formnya
<p>Agama: <select name="agama">
<option value="pilih" selected>--Pilih--</option>
<option value="islam">Islam</option>
<option value="kristen">Kristen</option>
<option value="katolik">Katolik</option>
<option value="hindu">Hindu</option>
<option value="budha">Budha</option>
</select></p>
</form>
Yang harus di ingat adalah, pada combobox sediakan satu pilihan yang bukan
datanya(bukan agama), gunanya sebagai acuan pada javascriptnya, kalo form yang
saya buat terletak pada kode berikut <option value=pilih selected>Pilih
</option>, dengan pilan tersebut maka gampang saja, pasti anda sudah
mengetahuinya.., :) bila masih belum dong, ini code JS nya
if (form.agama.value =="pilih"){
alert("Anda belum memilih agama!");
return (false);
}
return (true);
}
</script>
Input Hanya Angka

Kasus yang cocok misalnya dalah input No Telp/Hp pada form, ok tanpa tunggu
lama-lama :D langsung buat form nya, kalo males, ni kode form nya
<p>Telp/Hp : <input name="telp" type="text"></p>
</form>
Kalo di lihat, nama form input tersebut adalah telp, jadi value dari form telp tersebut
yang harus di cek satu per satu jika bukan angka langsung di tampilkan isi dari
alertnya. Berikut kode javascriptnya
if (form.telp.value != ""){
var x = (form.telp.value);
var status = true;
var list = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8",
"9");
for (i=0; i<=x.length-1; i++)
{
if (x[i] in list) cek = true;
else cek = false;
status = status && cek;
}
if (status == false)
{
alert("Telp harus angka!");
form.telp.focus();
return false;
}
}
return (true);
}
</script>
Validasi Penulisan Email

Validasi penulisan email adalah yang paling sering di gunakan, karena alamat email
memiliki karakter khusus yaitu @ dan .(titik), jika nama form inputnya dalah email,
maka code javasciptnya adalah sebagai berikut :
pola_email=/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
if (!pola_email.test(form.email.value)){
alert ('Penulisan Email tidak benar');
form.email.focus();
return false;
}
return (true);
}
</script>
Sangkep beta*
HOME
SANGKEP
KATEGORI
TUTORIAL TERBARU
KURSUS
TOPIK
Posting Pertanyaan
Welcome Guest
Login
Register
Home Pertanyaan Multiple Row, memasukkan data lebih dari satu baris di php dan mysql.
Search...
Search
Multiple Row, memasukkan data lebih dari satu

baris di php dan mysql.
Risonly Simbolon
Jan 29, 2013
Selamat sore Pak Ellyx..

Saya mohon bantuannya...
Saya sedang membuat database berbasis web dan saya menggunakan php dan mysql.
Pada perintah insert mysql, kita hanya dapat menyimpan satu baris record atau data.
Saya kesulitan menyiman data lebih dari satu baris (multiple rows). Setelah saya cari-cari lewat google, saya
menemukan cara demikian:
INSERT INTO namatabel (kolom1, kolom2)
SELECT data1, data2
UNION ALL
SELECT data3, data4
UNION ALL
.
.
.
SELECT data5, data6;
Saya sudah mencoba dan error... Script sama sekali tidak jalan.
Saya perhatikan, dengan perintah ini, berarti setiap kolom dari setiap baris harus diberi nama. Sementara, tabel
sumbernya sendiri di-generate dengan menggunakan array di halaman php sebelumnya....
berikut kodenya...
Perbesar
1. <?php
2. $marquery= mysql_query ("SELECT * FROM siswa where kelas='$kelas' and
subkelas='$subkelas' order by siswa.id ASC",$jou);
3. if(!$marquery)
4. {
5. die ("GAGAL melakukan query terhadap siswa berdasarkan kelas dan atau
subkelas: ".mysql_error());
6. }
7.
8. while ($row=mysql_fetch_array($marquery))
9. {
10. echo "<tr><td><select name=\"kelas\" id=\"kelas\"

value=\"kelas\"><option id=\"kelas\"
11. name=\"kelas\"
value=\"".$kelas."\">".$kelas."</option></select></td><td><select
12. name=\"subkelas\" id=\"subkelas\" value=\"subkelas\"><option
id=\"subkelas\"
13. name=\"subkelas\"
value=\"".$subkelas."\">".$subkelas."</option></select></td><td>
14. <select name=\"semester\" id=\"semester\"
value=\"semester\"><option id=\"semester\" name=\"semester\"
15. value=\"".$semester."\">".$semester."</option></select></td><td><se
lect name=\"tahunpelajaran\"
16. id=\"tahunpelajaran\" value=\"tahunpelajaran\"><option
id=\"tahunpelajaran\" name=\"tahunpelajaran\"
17. value=\"".$tahunpelajaran."\">".$tahunpelajaran."</option></select>
</td><td><select name=\"bidstudi\"
18. id=\"bidstudi\" value=\"bidstudi\"><option id=\"bidstudi\"
19. name=\"bidstudi\"
value=\"".$bidangstudi."\">".$bidangstudi."</option></select></td>
20. <td><select name=\"nama_siswa\" id=\"nama_siswa\"
value=\"nama_siswa\">
21. <option id=\"nama_siswa\" name=\"nama_siswa\"
value=\"".$row['nama_siswa']."\">".$row['nama_siswa']."</option></sel
ect></td>
22. <td><input maxlength=\"2\" size =\"2\" type=\"text\" name=\"thk1\"
id=\"thk1\" /></td>
id=\"thk2\" /></td>
24. <td><input maxlength=\"2\" size =\"2\" type=\"text\" name=\"tpr1\"
id=\"tpr1\" /></td>
id=\"tpr2\" /></td>
26. <td><input maxlength=\"2\" size =\"2\" type=\"text\" name=\"ub1\"
id=\"ub1\" /></td>
id=\"ub2\" /></td></tr>";
28. }
29.
30. ?>
31.
32. </table>
33. Pastikan semua data sudah benar sebelum menyimpan. Data yang sudah
disimpan TIDAK DAPAT DIRUBAH LAGI!!
34. <input type="submit" name="submit" id="submit" value="SIMPAN"/>
35. </form>
36. </div>
37. <?
38.
39.
40.
?>
41. </div>
42. </body>
43.
Nah....
Membuat nama kolom dari setiap baris mungkin tidak terlalu sulit yaitu dengan cara looping. Akan tetapi masalah
muncul ketika harus membuat looping itu di dalam perintah while.
mohon arahannya, pak.
Terima kasih.
Ellyx Christian
intinya adalah pada penamaan dari input text
Perbesar
1. <?php
3. if(!$marquery)
4. {
6. }
7. $i = 0;
9. {
10. echo "<tr><td><select name=\"kelas[$i]\" id=\"kelas\"
11. name=\"kelas\"
12. name=\"subkelas[$i]\" id=\"subkelas\" value=\"subkelas\"><option
id=\"subkelas\"
14. <select name=\"semester[$i]\" id=\"semester\"
lect name=\"tahunpelajaran[$i]\"

</td><td><select name=\"bidstudi[$i]\"
20. <td><select name=\"nama_siswa[$i]\" id=\"nama_siswa\"
ect></td>
22. <td><input maxlength=\"2\" size =\"2\" type=\"text\"
name=\"thk1[$i]\" id=\"thk1\" /></td>
name=\"thk2[$i]\" id=\"thk2\" /></td>
name=\"tpr1[$i]\" id=\"tpr1\" /></td>
name=\"tpr2[$i]\" id=\"tpr2\" /></td>
name=\"ub1[$i]\" id=\"ub1\" /></td>
name=\"ub2[$i]\" id=\"ub2\" /></td></tr>";
28. $i++;
29. }
30.
31. ?>
32.
33. </table>
36. </form>
37. </div>
38. <?
39.
40.
41.
?>
42. </div>
43. </body>
pada saat menyimpan data lakukan iterasi seperti:
Perbesar
1. <?php
2. foreach($_POST['thk1'] as $i => $thk1){
3.
$kelas = $_POST['kelas'][$i];
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
$subkelas = $_POST['subkelas'][$i];
$semester = $_POST['semester'][$i];
$tahunpelajaran = $_POST['tahunpelajaran'][$i];
$bidstudi = $_POST['bidstudi'][$i];
$nama_siswa = $_POST['nama_siswa'][$i];
$thk2 = $_POST['thk2'][$i];
$tpr1 = $_POST['tpr1'][$i];
$tpr2 = $_POST['tpr2'][$i]
$ub1 = $_POST['ub1'][$i];
$ub2 = $_POST['ub2'][$i];
//simpan ke database
// mysql_query("insert into ....")
}
Jan 30, 2013
0 suka, 0 tidak suka
Risonly Simbolon
Terima kasih pak...
Penamaannya ternyata sangat sederhana. tidak usah pakai perintah for
cukup $i++
Terima kasihhhh....
Tuhan memberkatimu pak.
Feb 1, 2013
Risonly Simbolon
Bagaimana cara memberi donasi untuk website ini, pak?
Feb 1, 2013

Please login to answer!
Advertise Here
MyPHPtutorials.com
Terms and Conditions | Kebijakan Privasi | Report
MyPHPtutorials by I Putu Ellyx Christian is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike

3.0 Unported License
close
1. <?php
3. if(!$marquery)
4. {
6. }
7.
9. {
10. echo "<tr><td><select name=\"kelas\" id=\"kelas\"
11. name=\"kelas\"
12. name=\"subkelas\" id=\"subkelas\" value=\"subkelas\"><option
id=\"subkelas\"
14. <select name=\"semester\" id=\"semester\"
lect name=\"tahunpelajaran\"
</td><td><select name=\"bidstudi\"
20. <td><select name=\"nama_siswa\" id=\"nama_siswa\"
ect></td>
id=\"thk1\" /></td>
id=\"thk2\" /></td>
id=\"tpr1\" /></td>
id=\"tpr2\" /></td>
id=\"ub1\" /></td>
id=\"ub2\" /></td></tr>";
28. }
29.
30. ?>
31.
32. </table>
35. </form>
36. </div>
37. <?
38.
39.
40.
?>
41. </div>
42. </body>
43.
-Cara Membuat Multi Input dengan PHP Menginput data secara satu persatu
memanglah melelahkan dan membutuhkan banyak waktu, setelah saya mencari dari
mbah google ketemu beberapa cara melakukan multi input.
Dalam hal ini akan saya gunakan untuk menambahkan fitus input nilai oleh guru dalam
Mata pelajaran tertentu untuk siswa satu kelas yang di ampu, di mana selama ini proses
input ini di lakukan dengan satu persatu data di tambahkan. Dengan prosedur di atas
maka saya bisa membangun halaman untuk menambahkan data nilai dalam satu kelas
dengan sekali perintah simpan. Tentunya sebelumnya data nilai dari masing masing
anak sudah di tambahkan.
Berikut adalah scriptnya :
<form action="insert1.php" method="post">

<table width="77%">
<td height="63" colspan="5"><h3>Other involvement during high school, college
(clubs, sports, work, volunteer, etc.): </h3></td>
</tr>
<tr>
<td width="20%"><h3>Activity</h3></td>
<td width="19%"><h3>Position</h3></td>
<td width="23%"><h3>Start Date</h3></td>
<td width="25%" height="60"><h3>End Date</h3></td>
</tr>
<tr>
<td height="63"><input name="Activity[]" type="text" id="Activity[]" size="15" />

<td height="63"><input name="Position[]" type="text" id="Position[]" size="15" />
<td height="63"><input name="StartDate[]" type="text" id="StartDate[]" size="15" />
<td height="63"><input name="EndDate[]" type="text" id="EndDate[]" size="15" />
</tr>
<tr>

</tr>
<tr>

</table>
<p> </p>
<p>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</p>
</form>
Here is the insert1.php file

<?php
$con = mysql_connect("localhost","Application","*******");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("CpaApp", $con);
//Assign each array to a variable

foreach($_POST['Activity'] as $row=>$Act)
{
$Activity=$Act;
$Position=$_POST['Position'][$row];
$StartDate=$_POST['StartDate'][$row];
$EndDate=$_POST['EndDate'][$row];
}
//enter rows into database

foreach($_POST['Activity'] as $row=>$Act)
{
$Activity=mysql_real_escape_string($Act);
$Position=mysql_real_escape_string($_POST['Position'][$row]);
$StartDate=mysql_real_escape_string($_POST['StartDate'][$row]);
$EndDate=mysql_real_escape_string($_POST['EndDate'][$row]);
}
$involv = "INSERT INTO Involvement (Activity, Position, StartDate, EndDate)

VALUES ('.$Activity.','.$Position.','.$StartDate.','.$EndDate.')";
if (!mysql_query($involv,$con))
{
die('Error: ' . mysql_error());

}
echo "$row record added";
mysql_close($con)
?>
Dari Script di atas yang saya gunakan untuk membuat halaman penambahan nilai siswa
perkelas, sehingga sekarang bapak dan ibu guru yang mau menambahkan nilai siswa
bisa lebih cepat dan lebih mudah.
Cara Membuat Validasi Data Di PHP

KampusKita.us | Mumpung lagi inget mau ngasih trik tentang PHP lagi. Kalini saya akan berbagi tips
tentang cara memvalidasi sebuah data dari database. Contoh ketika kita mendaftar ke sebuah event
kemudian kita mendapat sebuah key number validasi dan diminta untuk memverifikasikan lewat
website, kira kira bayangan kamu gimana? sudah tergambar kan kasusnya ? klo..ga..kelewatan deh..!
Ok kita buat form untuk input datanya:
verivikasi.html
<form action="cek_nomor.php" method="post">
Masukan Key Number : <input type="text" name="key">
</form>
Setelah membuat form diatas kita siapkan dulu tabelnya

CREATE TABLE IF NOT EXISTS `verifikasi` (
`key_kode` varchar(5) NOT NULL,
`nama_terdaftar` varchar(35) NOT NULL,
`status` enum('verified','pending') NOT NULL
);
Kemudian Isikan sample data dibawah ini:
INSERT INTO `contoh`.`verifikasi` (`key_kode`, `nama_terdaftar`, `status`) VALUES ('abc123',

'Kampus Kita', 'pending'), ('123abc', 'Studio Networks Indonesia', 'pending');
Nah setelah kita membuat sample datanya. Kita lanjut ke pembuatan script pemroses dari form diatas
dengan anama file cek_nomor.php
<?php
mysql_connect("localhost","user_db","password_db");
mysql_select_db("contoh");
$key=$_POST['key'];
$d=mysql_fetch_array(mysql_query("SELECT * FROM verifikasi WHERE key_kode='$key' "));
if($key!=$d[key_kode]){
echo "KunciValidasi Tidak Valid atau Tidak ditemukan !!!";
else{
echo 'Yth <b>'.$d[nama_terdaftar].' Terima kasih anda telah melakukan konfirmasi validasi data';
// Kemudian kita update status nya menjadi verified
mysql_query("UPDATE verifikasi SET status='verified' WHERE key_kode='$key' ");
?>

Java Script Untuk Validasi Form

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Java Script Untuk Validasi Form

Diunggah oleh

Hak Cipta:

Format Tersedia

Java Script untuk validasi form input

25 Comments Posted by Almazari on November 1, 2011

Mencegah Inputan Kosong

Pada form tersebut terdapat kode onsubmit=return validasi_input(this) , fungsinya

Membatasi Minimal Inputan

Minimal Inputan dan hanya Huruf atau Angka

Validasi Pilihan Radio Button

Pada From tersebut masih terdapat kode onsubmit=return validasi_input(this),

Validasi Untuk Combobox

Input Hanya Angka

Validasi Penulisan Email

Multiple Row, memasukkan data lebih dari satu

Selamat sore Pak Ellyx..

10. echo "<tr><td><select name=\"kelas\" id=\"kelas\"

16. id=\"tahunpelajaran\" value=\"tahunpelajaran\"><option

Jan 30, 2013

0 suka, 0 tidak suka

0 suka, 0 tidak suka

0 suka, 0 tidak suka

Terms and Conditions | Kebijakan Privasi | Report

MyPHPtutorials by I Putu Ellyx Christian is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike

Berikut adalah scriptnya :

<form action="insert1.php" method="post">

<td height="63"><input name="Activity[]" type="text" id="Activity[]" size="15" />

<td height="63"><input name="Activity[]" type="text" id="Activity[]" size="15" />

<td height="63"><input name="Activity[]" type="text" id="Activity[]" size="15" />

<input type="submit" name="Submit" id="Submit" value="Submit" />

Here is the insert1.php file

//Assign each array to a variable

//enter rows into database

$involv = "INSERT INTO Involvement (Activity, Position, StartDate, EndDate)

die('Error: ' . mysql_error());

Cara Membuat Validasi Data Di PHP

Ok kita buat form untuk input datanya:

Masukan Key Number : <input type="text" name="key">

Setelah membuat form diatas kita siapkan dulu tabelnya

Kemudian Isikan sample data dibawah ini:

INSERT INTO `contoh`.`verifikasi` (`key_kode`, `nama_terdaftar`, `status`) VALUES ('abc123',

$d=mysql_fetch_array(mysql_query("SELECT * FROM verifikasi WHERE key_kode='$key' "));

echo "KunciValidasi Tidak Valid atau Tidak ditemukan !!!";

// Kemudian kita update status nya menjadi verified

mysql_query("UPDATE verifikasi SET status='verified' WHERE key_kode='$key' ");

Anda mungkin juga menyukai