Terkadang kita sering beribet dengan begitu banyaknya script yang perlu di buat untuk membuat sebuah form validasi. Setelah beberapa kali googling, akhirnya aku menemukan sebuah library buat form validasi menggunakan java script. Aku akan sedikit menjelaskan cara pembuatannya.
- pertama kita membutuhkan library form validasi itu, yang dapat di download gratis disini. mereka menyebutnya gen_validatorv31.js. dalam file yang di download di atas telah terdapat beberapa contoh siap pakainya.
- setelah mendownloadnya, ambil file gen_validatorv31.js dan simpan pada folder dimana anda akan mebuat file fomh validator.
- kita mulai melakukan coding :
coding untuk header :
<head>
<title>Example for Validator</title>
<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>
</head>
<script src="gen_validatorv31.js" type="text/javascript"></script>
</head>
di atas merupakan script untuk memasukan library form validator tersebut.
sekarang masuk ke bagian boddy
<body>
<form action="" name="myform" >
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">Nama Depan</td>
<td><input type="text" name="FirstName"></td>
</tr>
<tr>
<td align="right">Nama Belakang</td>
<td><input type="text" name="LastName"></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="Email"></td>
</tr>
<tr>
<td align="right">Telepon</td>
<td><input type="text" name="Phone"></td>
</tr>
<tr>
<td align="right">Alamat</td>
<td><textarea cols="20" rows="5" name="Address"></textarea></td>
</tr>
<tr>
<td align="right">Kota</td>
<td>
<SELECT name="Country">
<option value="" selected>[Pilihan Anda]
<option value="008">Jakarta
<option value="012">Bandung
<option value="016">Semarang
<option value="020">Surabaya
</SELECT>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<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.addValidation("FirstName","req","Masukan Nama Depan anda");
frmvalidator.addValidation("FirstName","maxlen=20", "maksimal huruf adalah 20");
frmvalidator.addValidation("FirstName","alpha","hanya alphabet yang di ijinkan");
frmvalidator.addValidation("LastName","req","Masukan Nama Belakang anda");
frmvalidator.addValidation("LastName","maxlen=20","Maxsima huruf adalah 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req","Masukan Email Anda");
frmvalidator.addValidation("Email","email","Masukan email yang benar");
frmvalidator.addValidation("Phone","maxlen=50");
frmvalidator.addValidation("Phone","req","Masukan Telephone");
frmvalidator.addValidation("Phone","numeric","Hanya Angka yang boleh dimasukan");
frmvalidator.addValidation("Address","maxlen=50");
frmvalidator.addValidation("Country","dontselect=0","Tolong Pilih salah satu");
</script>
</body>
sedikit penjelasan:
script di bawah ini untuk peng-objekan form
var frmvalidator = new Validator("myform");
script ini untuk menentukan aksi yang aka di lakukan jika terjadi kesalahan.
frmvalidator.addValidation("FirstName","req","Masukan Nama Depan anda");
frmvalidator.addValidation("FirstName","maxlen=20", "maksimal huruf adalah 20");
frmvalidator.addValidation("FirstName","alpha","hanya alphabet yang di ijinkan");
ini adalah source code utuhnya :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example for Validator</title>
<script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script>
</head>
<body>
<form action="" name="myform" >
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td align="right">Nama Depan</td>
<td><input type="text" name="FirstName"></td>
</tr>
<tr>
<td align="right">Nama Belakang</td>
<td><input type="text" name="LastName"></td>
</tr>
<tr>
<td align="right">EMail</td>
<td><input type="text" name="Email"></td>
</tr>
<tr>
<td align="right">Telepon</td>
<td><input type="text" name="Phone"></td>
</tr>
<tr>
<td align="right">Alamat</td>
<td><textarea cols="20" rows="5" name="Address"></textarea></td>
</tr>
<tr>
<td align="right">Kota</td>
<td>
<SELECT name="Country">
<option value="" selected>[Pilihan Anda]
<option value="008">Jakarta
<option value="012">Bandung
<option value="016">Semarang
<option value="020">Surabaya
</SELECT>
</td>
</tr>
<tr>
<td align="right"></td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
<script language="JavaScript" type="text/javascript">
//membuat validator setelah form
var frmvalidator = new Validator("myform");
frmvalidator.addValidation("FirstName","req","Masukan Nama Depan anda");
frmvalidator.addValidation("FirstName","maxlen=20", "maksimal huruf adalah 20");
frmvalidator.addValidation("FirstName","alpha","hanya alphabet yang di ijinkan");
frmvalidator.addValidation("LastName","req","Masukan Nama Belakang anda");
frmvalidator.addValidation("LastName","maxlen=20","Maxsima huruf adalah 20");
frmvalidator.addValidation("Email","maxlen=50");
frmvalidator.addValidation("Email","req","Masukan Email Anda");
frmvalidator.addValidation("Email","email","Masukan email yang benar");
frmvalidator.addValidation("Phone","maxlen=50");
frmvalidator.addValidation("Phone","req","Masukan Telephone");
frmvalidator.addValidation("Phone","numeric","Hanya Angka yang boleh dimasukan");
frmvalidator.addValidation("Address","maxlen=50");
frmvalidator.addValidation("Country","dontselect=0","Tolong Pilih salah satu");
</script>
</body>
</html>
untuk ketentuan library nya ada di bawah ini
required req | The field should not be empty |
maxlen=??? maxlength=??? | checks the length entered data to the maximum. For example, if the maximum size permitted is 25, give the validation descriptor as "maxlen=25" |
minlen=??? minlength=??? | checks the length of the entered string to the required minimum. example "minlen=5" |
alphanumeric / alnum | Check the data if it contains any other characters other than alphabetic or numeric characters |
alphanumeric_space / alnum_s | Allows only alphabetic, numeric and space characters |
| num numeric | Check numeric data |
| alpha alphabetic | Check alphabetic data. |
| alpha_s alphabetic_space | Check alphabetic data and allow spaces. |
| The field is an email field and verify the validity of the data. | |
| lt=??? lessthan=??? | Verify the data to be less than the value passed. Valid only for numeric fields. example: if the value should be less than 1000 give validation description as "lt=1000" |
| gt=??? greaterthan=??? | Verify the data to be greater than the value passed. Valid only for numeric fields. example: if the value should be greater than 10 give validation description as "gt=10" |
| regexp=??? | Check with a regular expression the value should match the regular expression. example: "regexp=^[A-Za-z]{1,20}$" allow up to 20 alphabetic characters. |
| dontselect=?? | This validation descriptor is valid only for select input items (lists) Normally, the select list boxes will have one item saying 'Select One' or some thing like that. The user should select an option other than this option. If the index of this option is 0, the validation description should be "dontselect=0" |
| dontselectchk | This validation descriptor is valid only for check boxes. The user should not select th given check box. Provide the value of the check box instead of ?? For example, dontselectchk=on |
| shouldselchk | This validation descriptor is valid only for check boxes. The user should select th given check box. Provide the value of the check box instead of ?? For example, shouldselchk=on |
| selone_radio | Checks whether at least one radio button is selected. |
terimakasih telah membacanya, selamat mencoba
0 comments:
Post a Comment