Blogger templates

Pemrograman Web Dinamis

Unknown 21.33 Tidak ada komentar
Membuat Form Pendaftaran dengan Validasi

Untuk membuat form pendaftaran dengan validasi kita bisa mulai dengan membuat file form.html

Source Code

form.html

 <html>
<head>
<title>Form Pendaftaran</title>

<script language="JavaScript" src="validjs.js" type="text/javascript"></script>
</head>
<body>
<H1>Form Pendaftaran</h1>

<form name="myform" action="" method='POST'  >
   Nim
    <input type="text" name="nim" id='nim'><br/>
   Nama
    <input type="text" name="nama" id='nama'><br/>
   EMail
    <input type="text" name="email" id='email'><br/>
   Umur
    <input type="text" name="umur" id='umur'><br/>

   Username
    <input type='text' name='username' id='username'><br/>
   Password
 <input type='password' name='password' id='password'><br/>
<br/>
   
<div id='myform_errorloc' style='color:red'>
                              </div>
   <br/>
    <input type="submit" value="Submit">
</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.EnableOnPageErrorDisplaySingleBox();
 frmvalidator.EnableMsgsTogether();

  frmvalidator.addValidation("nim","req","Nim belum di isi");
  frmvalidator.addValidation("nim","maxlen=12","nama Maximal  12");
  frmvalidator.addValidation("nim","numeric","Nim tidak boleh mengandung huruf");

  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=20","umur minimal harus 21");
 
  frmvalidator.addValidation("username","req","Username harus di isi");

  frmvalidator.addValidation("password","req","Password harus di isi");
</script>
<body>
</html>

Disini saya memakai validasi javascript
dan tampilannya seperti dibawah ini

Output


Apabila semua kolom yang tersedia tidak diisi, lalu kita tekan tombol submit maka akan muncul peringatan seperti pada gambar di atas.

Kemudian apabila kita masukkan nim dengan huruf, nama kita isi dengan angka ataupun simbol, email kita isi tanpa format email, kemudian umur kita isi 19 (untuk umur sudah saya batasi minimal 21) lalu username dan password tidak diisi maka akan muncul peringatan seperti pada gambar di bawah

Output




Sekian Pembahasan dari saya. Terima Kasih.


Tidak ada komentar :

Posting Komentar

Langganan: Posting Komentar ( Atom )

Subscribe