Thursday, November 14, 2013

Validation Form di ASP

Jika di postingan sebelumnya -> ASP 5
Membahas tentang Pengisian Form di ASP

 Sekarang saya menulis tentang validasi nya

 Validation Control di ASP ada banyak macamnya, diantaranya :

 Required Field Validator digunakan untuk memvalidasi apakah user sudah memasukkan inputan atau inputan tidak boleh kosong.

 Range Validator digunakan untuk membatasi inputan dari user sesuai dengan nilai minimal dan maksimal yang sudah ditentukan.

 CompareValidator digunakan untuk membandingkan nilai yang digunakan pada server control yang berbeda, atau membandingkan nilai input yang dimasukkan user apakah memenuhi dengan nilai yang diharapkan.

 Validation Summary digunakan untuk menampilkan list detail error dari validation control. Selain menampilkan list detail, validation summary menampilkan pesan error melalui messagebox.

 Regular Expression Validator digunakan untuk membandingkan inputan dengan regular expression yang Anda buat antaralain yang sering digunakan adalah pengecekan e-mail, website, nomor telepon, dan lain-lain.

   



%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TugasForm.aspx.cs" Inherits="Bab3.TugasForm" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Inputan</title>
    <link rel="stylesheet" type="text/css" href="nah.css" />

     <style>
        .f {
            font-family: Verdana;
        }
        .auto-style1 {
            width: 712px;
        }
        #Reset1 {
            height: 27px;
            width: 64px;
        }
    </style>
 
</head>
<body Style="background-image:url(atraw.png);background-repeat:repeat;">
    <form id="form1" runat="server">
        <center>

             <h2>
<span style="color: black; font-family: Adler;">Forum Ikebana</h2>
    <table bgcolor="#DAD4BF" class="f" width="710" border="0" style="border-radius:20px ;">
 <tr>
     <td rowspan="10" width="250" Style=' border-top-left-radius:20px;border-bottom-left-radius:20px '><center><img src="ikbn.jpg" width="200" height="260" /></center></td>
        <td colspan="4" Style=' border-top-right-radius:20px; '>
         <center><font color="brown" font size="6">Form Pendaftaran</font></center>
        </td>
     
    </tr>
        <tr>
    <td colspan="4" style="text-align:left">
        <asp:ValidationSummary ID="vsSum" ShowMessageBox="true" runat="server" Height="114px"></asp:ValidationSummary>
    </td>
     
  </tr>
    <tr>
     <td width="300"> Nama </td>
        <td width="1"><center>:</center></td>
        <td class="auto-style1"><asp:TextBox ID="nama" type="text" Size="35" runat="server"
            ></asp:TextBox></td>
        <td><asp:RequiredFieldValidator ID="rfvNama" runat="server" ErrorMessage="Nama Kosong"
            Text="<img src='warning.png' width='10px' />Nama Kosong" ControlToValidate="nama"></asp:RequiredFieldValidator> </td>
    </tr>
    <tr>
     <td> Jenis Kelamin</td>
        <td><center>:</center></td>
        <td class="auto-style1">
   
            <asp:radiobutton groupname="Gender" id="rbtLaki" runat="server" text="Laki-Laki"></asp:radiobutton>
            <asp:radiobutton groupname="Gender" id="rbtPerempuan" runat="server" text="Perempuan"></asp:radiobutton>
            </td>
        <td>
          <asp:Label ID="lblGender" runat="server" ></asp:Label></td>
    </tr>
        <tr>
    <td>Umur</td>
    <td>:</td>
    <td class="auto-style1"><asp:TextBox ID="txtUmur" Size="35" runat="server"></asp:TextBox></td>
        <td><asp:RangeValidator ID="rvUmur" runat="server" ErrorMessage="Umur Diluar Range" Text="<img src='warning.png' width='10px'>Umur diluar Range" MaximumValue="99" ControlToValidate="txtUmur"></asp:RangeValidator>

             <asp:RequiredFieldValidator ID="rfvUmur" runat="server" ErrorMessage="Umur Kosong" Text="<img src='warning.png' width='10px'>Umur Kosong" ControlToValidate="txtUmur" ></asp:RequiredFieldValidator></td>
  </tr>
        <tr>
     <td>Kota</td>
        <td><center>:</center></td>
        <td class="auto-style1">
            <asp:TextBox ID="kota" Size="35" runat="server"></asp:TextBox>                            
        </td>
            <td><asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Kota Kosong"
            Text="<img src='warning.png' width='10px' />Kota Kosong" ControlToValidate="kota"></asp:RequiredFieldValidator> </td>
    </tr>
    <tr>
     <td>E-mail</td>
        <td><center>:</center></td>
        <td class="auto-style1"><asp:TextBox ID="Email" type="text" Size="35" runat="server"
            ></asp:TextBox></td>
        <td><asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="<b>{format email salah}</b>"
             ControlToValidate="Email"
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" />

             <asp:RequiredFieldValidator ID="rfvEmail" runat="server" ErrorMessage="E-Mail Kosong" Text="<img src='warning.png' width='10px'>Email Kosong" ControlToValidate="Email">
            </asp:RequiredFieldValidator>
        </td>
    </tr>
      <tr>
     <td>Password</td>
        <td><center>:</center></td>
          <td class="auto-style1"><asp:TextBox ID="pwd" type="password" Size="35" runat="server"
            ></asp:TextBox></td>
  </tr>
   <tr>
    <td>Confirm Password</td>
    <td>:</td>
    <td class="auto-style1">
        <asp:TextBox ID="txtRePass" Size="35" TextMode="Password" runat="server"></asp:TextBox></td>
       <td> <asp:CompareValidator ID="cvPass" runat="server" ErrorMessage="Password Wajib Sama" Text="<img src='warning.png' width='10px' />Password Harus Sama" ControlToValidate="pwd" ControlToCompare="txtRePass"></asp:CompareValidator>
    </td>
  </tr>

     <tr>
     <td colspan="4"  style=' border-bottom-right-radius:20px;'><center>
         <asp:button id="prev" onclick="prev_Click" runat="server" style="background-color: antiquewhite; border-radius: 10px;" text="Preview Di Bawah"></asp:button> &nbsp;

            <input id="Reset1" type="reset" value="Reset"> </center>
  </td>      
    </tr>

 </table>
<table aria-dropeffect="popup" width="550" border="0" id="Table1" runat="server" style="background-color: white; border-radius: 20px;">
<tr>
    <td bgcolor="#DAD4BF" colspan="3" style="border-top-left-radius: 20px; border-top-right-radius: 20px;"><center>
<b><span style="color: black;"><h2>Data Akun</h2>
</span></b></center>
</td>
  </tr>
<tr>
    <td width="99">Nama</td>
    <td width="19">:</td>
    <td width="180">
        <asp:label id="lblNama1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Jenis Kelamin</td>
    <td>:</td>
    <td>
        <asp:label id="lblGender1" runat="server"></asp:label></td>
  </tr>
    <tr>
    <td>Umur</td>
    <td>:</td>
    <td><asp:Label ID="lblUmur1" runat="server" ></asp:Label></td>
  </tr>
    <tr>
    <td>Kota</td>
    <td>:</td>
    <td><asp:Label ID="lblKota1" runat="server" ></asp:Label></td>
  </tr>
<tr>
    <td>Email</td>
    <td>:</td>
    <td><asp:label id="lblEmail1" runat="server"></asp:label></td>
  </tr>
<tr>
    <td>Password</td>
    <td>:</td>
    <td><asp:label id="lblPassword1" runat="server"></asp:label></td>
  </tr>

 </table>
</center>
    </form>

 </body>
</html>


Klik kanan View Code, tulis script berikut :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

 namespace Bab3
{
    public partial class TugasForm : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Table1.Visible = false;

         }
        public string uye;
        protected void prev_Click(object sender, EventArgs e)
        {
            Table1.Visible = true;
            lblNama1.Text = nama.Text;

             lblKota1.Text = kota.Text;

             lblUmur1.Text = txtUmur.Text;

             lblEmail1.Text = Email.Text;

             lblPassword1.Text = pwd.Text;

             if (rbtLaki.Checked)
            {
                lblGender1.Text = rbtLaki.Text;

             }
            else if (rbtPerempuan.Checked)
            {
                lblGender1.Text = rbtPerempuan.Text;

             }
            else
            {
                lblGender1.Text = "Gender Belum diisi";
            }
        }

     }
}

Inilah tampilan form yang sudah disubmit 




Saat ada form yang tidak diisi, akan muncul Validation Summary terlebih dahulu

Sampai jumpa di praktikum berikutnya :)
pukul

No comments:

Post a Comment