Validasi Element Masukkan FORM
Sedangkan gambar berikutnya terlihat ada beberapa isian yang dimasukkan tidak benar sehingga memunculkan tulisan berwarna merah. contohnya email tidak valid dan sebagainya
Proses validasi menggunakan javascript, sehingga kita membutuhkan sebuah file java yang dijadikan satu folder dengan program yang kita buat. Berikut ini Script Tampilan Script secara keseluruhan program :
<html>
<head>
<title>Form Pendaftaran Online </title>
<script language="JavaScript" src="validjs.js" type="text/javascript"></script>
</head>
<body>
<H1>Form Pendaftaran</h1>
<form name="myform" action="" method="post" >
Nama
<input type="text" name="nama" id="nama"><br/>
EMail
<input type="text" name="email" id="email"><br/>
Umur
<input type="text" name="umur"><br/>
Jenis kelamin
<input type="radio" name="jk" value="Pria">Pria
<input type="radio" name="jk" value="Wanita">Wanita<br/>
Propinsi
<SELECT name="propinsi">
<option value="Pilihan" selected>--pilih provinsi--</option>
<option value="Jawa Barat" >Jawa Barat</option>
<option value="Jawa Tengah" >Jawa Tengah</option>
<option value="Jawa Timur" >Jawa Timur</option>
</SELECT>
<br/>
<div id='myform_errorloc' style='color:red'>
</div>
<br/>
<input type="submit" name="submit" value="Kirim Data" id="submit">
</form>
<?php
$nama = $_POST['nama'];
$email = $_POST['email'];
$umur = $_POST['umur'];
$jk = $_POST['jk'];
$propinsi = $_POST['propinsi'];
$submit = $_POST['submit'];
if($submit){
echo "----BIODATA PEGAWAI-----<br>";
echo "Nama : $nama <br>";
echo "E-Mail : $email <br>";
echo "Umur : $umur <br>";
echo "Jenis Kelamin : $jk <br>";
echo "Propinsi : $propinsi <br>";
echo "-----------------------<br>";
}
?>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("nama","req","Nama belum di isi");
frmvalidator.addValidation("nama","maxlen=20","nama Maximal 20");
frmvalidator.addValidation("nama","alpha_s","Nama tidak boleh mengandung angka atau symbol");
frmvalidator.addValidation("email","req");
frmvalidator.addValidation("email","email","email tidak valid");
frmvalidator.addValidation("umur","req");
frmvalidator.addValidation("umur","numeric");
frmvalidator.addValidation("umur","gt=12","umur minimal harus 13");
frmvalidator.addValidation("jk","selone","anda belum memilih jenis kelamin");
frmvalidator.addValidation("propinsi","dontselect=0","Anda belum memilih propinsi");
</script>
<body>
</html>
Download validjs.js
Pada Form terlihat Elemet masukan diantaranya text, radio,select dan submit. Proses masukkan kemudian ditampilkan menggunakan skrip php, yakni menampilkan nilai variabel menggunakan POST. Terlihat pada gambar bahwa data telah dimasukkan dengan benar tanpa ada yang salah atau kosong.
Proses validasi menggunakan javascript, sehingga kita membutuhkan sebuah file java yang dijadikan satu folder dengan program yang kita buat. Berikut ini Script Tampilan Script secara keseluruhan program :
<html>
<head>
<title>Form Pendaftaran Online </title>
<script language="JavaScript" src="validjs.js" type="text/javascript"></script>
</head>
<body>
<H1>Form Pendaftaran</h1>
<form name="myform" action="" method="post" >
Nama
<input type="text" name="nama" id="nama"><br/>
<input type="text" name="email" id="email"><br/>
Umur
<input type="text" name="umur"><br/>
Jenis kelamin
<input type="radio" name="jk" value="Pria">Pria
<input type="radio" name="jk" value="Wanita">Wanita<br/>
Propinsi
<SELECT name="propinsi">
<option value="Pilihan" selected>--pilih provinsi--</option>
<option value="Jawa Barat" >Jawa Barat</option>
<option value="Jawa Tengah" >Jawa Tengah</option>
<option value="Jawa Timur" >Jawa Timur</option>
</SELECT>
<br/>
<div id='myform_errorloc' style='color:red'>
</div>
<br/>
<input type="submit" name="submit" value="Kirim Data" id="submit">
</form>
<?php
$nama = $_POST['nama'];
$email = $_POST['email'];
$umur = $_POST['umur'];
$jk = $_POST['jk'];
$propinsi = $_POST['propinsi'];
$submit = $_POST['submit'];
if($submit){
echo "----BIODATA PEGAWAI-----<br>";
echo "Nama : $nama <br>";
echo "E-Mail : $email <br>";
echo "Umur : $umur <br>";
echo "Jenis Kelamin : $jk <br>";
echo "Propinsi : $propinsi <br>";
echo "-----------------------<br>";
}
?>
<script language="JavaScript" type="text/javascript">
//You should create the validator only after the definition of the HTML form
var frmvalidator = new Validator("myform");
frmvalidator.EnableOnPageErrorDisplaySingleBox();
frmvalidator.EnableMsgsTogether();
frmvalidator.addValidation("nama","req","Nama belum di isi");
frmvalidator.addValidation("nama","maxlen=20","nama Maximal 20");
frmvalidator.addValidation("nama","alpha_s","Nama tidak boleh mengandung angka atau symbol");
frmvalidator.addValidation("email","req");
frmvalidator.addValidation("email","email","email tidak valid");
frmvalidator.addValidation("umur","req");
frmvalidator.addValidation("umur","numeric");
frmvalidator.addValidation("umur","gt=12","umur minimal harus 13");
frmvalidator.addValidation("jk","selone","anda belum memilih jenis kelamin");
frmvalidator.addValidation("propinsi","dontselect=0","Anda belum memilih propinsi");
</script>
<body>
</html>
Download validjs.js
Post a Comment