1. Buka Visual Studio
2. Buat New Project dengan nama Bab3
3. Buat New File dengan nama ValidasiForm.aspx
Kemudian ketikkan script di bawah ini :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidasiForm.aspx.cs" Inherits="Bab3.Tugas.ValidasiForm" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style3 {
width: 173px;
}
.auto-style4 {
width: 155px;
}
.auto-style5 {
width: 178px;
}
</style>
</head>
<body class="bg">
<form id="form1" runat="server">
<div>
<asp:ValidationSummary ID="vsSum" CssClass="div" runat="server" Width="286px"
ShowMessageBox="true" />
</div><br />
<center><table style="width:initial;">
<tr>
<th colspan="4">MASUKKAN DATA DIRI</th>
</tr>
<tr>
<td rowspan="7" class="auto-style5">
<center><img src="logotelkom.jpg" style="width: 156px; height: 231px" />
</td>
</tr>
<tr>
<td class="auto-style4">Nama Lengkap</td>
<td class="auto-style3">
<asp:TextBox ID="txtNama" runat="server" Width="201px" Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="rfvNama" runat="server" ControlToValidate="txtNama"
CssClass="RequiredFieldValidator" ErrorMessage="Nama harus diisi.."
Text="<img src='stacks_image_91.png' width='25px' class='center' />Nama Harus Diisi.." />
</td>
</tr>
<tr>
<td class="auto-style4">NIS</td>
<td class="auto-style3">
<asp:TextBox ID="txtNIS" runat="server" Width="201px" Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="cvNIS1" runat="server" ControlToValidate="txtNIS"
CssClass="RequiredFieldValidator" ErrorMessage="NIS harus diisi.."
Text="<img src='stacks_image_91.png' width='25px' class='center'/>NIS harus diisi" />
<asp:CustomValidator ID="cvNIS" runat="server" ControlToValidate="txtNIS"
OnServerValidate="cvNIS_ServerValidate"
CssClass="RequiredFieldValidator" ErrorMessage="NIS harus 13 angka"
Text="<img src='stacks_image_91.png' width='25px' class='center' />NIS harus 13 angka" />
</td>
</tr>
<tr>
<td class="auto-style4">Umur</td>
<td class="auto-style3">
<asp:TextBox ID="txtUmur" runat="server" Width="201px" Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="rfvUmur1" runat="server" ControlToValidate="txtUmur"
CssClass="RequiredFieldValidator" ErrorMessage="Umur harus diisi.."
Text="<img src='stacks_image_91.png' width='25px' class='center'/>Umur harus diisi" />
<asp:RangeValidator ID="rfvUmur" runat="server" ControlToValidate="txtUmur"
MinimumValue="4" MaximumValue="99"
CssClass="RequiredFieldValidator" ErrorMessage="Range Umur 4-99 tahun.."
Text="<img src='stacks_image_91.png' width='25px' class='center'/>Range Umur 4-99 tahun.." />
</td>
</tr>
<tr>
<td class="auto-style4">Email</td>
<td class="auto-style3">
<asp:TextBox ID="txtEmail" runat="server" Width="201px" Height="30px"></asp:TextBox></td>
<td> <asp:RequiredFieldValidator ID="rfvEmail1" runat="server" ControlToValidate="txtEmail"
CssClass="RequiredFieldValidator" ErrorMessage="Email harus diisi.."
Text="<img src='stacks_image_91.png' width='25px' class='center'/>Email harus diisi" />
<asp:RegularExpressionValidator ID="rfvEmail" runat="server" ControlToValidate="txtEmail"
CssClass="RequiredFieldValidator" ErrorMessage="Email format salah" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Email format salah" />
</td>
</tr>
<tr>
<td class="auto-style4">Password</td>
<td class="auto-style3">
<asp:TextBox ID="txtPass" runat="server" Width="201px" Height="30px"></asp:TextBox>
</td>
<td> <asp:RequiredFieldValidator ID="cvPass" runat="server" ControlToValidate="txtPass"
CssClass="RequiredFieldValidator" ErrorMessage="Password harus diisi"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Password harus diisi" />
</td>
</tr>
<tr>
<td class="auto-style4">Confirm Password</td>
<td class="auto-style3">
<asp:TextBox ID="txtConfirm" runat="server" Width="201px" Height="30px"></asp:TextBox>
</td>
<td> <asp:RequiredFieldValidator ID="cvConfirm1" runat="server" ControlToValidate="txtConfirm"
CssClass="RequiredFieldValidator" ErrorMessage="Confirm Password harus diisi.."
Text="<img src='stacks_image_91.png' width='25px' class='center'/>Confirm Password harus diisi" />
<asp:CompareValidator ID="cvConfirm" runat="server" ControlToValidate="txtPass" ControlToCompare="txtConfirm"
CssClass="RequiredFieldValidator" ErrorMessage="Confirm harus sama dengan Password"
Text="<img src='stacks_image_91.png' width='25px' class='center' />Confrim harus sama dengan password" />
</td>
</tr>
</table>
<br />
<asp:Button ID="KIRIM" runat="server" Text="Daftar" Height="36px" Width="145px" PostBackUrl="~/Tugas/ValidasiFormResult.aspx" />
</form>
</body>
</html>
4. Setelah selesai, Baut New File lagi dan beri nama ValidasiFormResult.aspx
Kemudian ketikkan script di bawah ini
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidasiFormResult.aspx.cs" Inherits="Bab3.Tugas.ValidasiFormResult" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="MyStyle.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style3 {
width: 173px;
}
.auto-style4 {
width: 155px;
}
.auto-style5 {
width: 178px;
}
</style>
</head><body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td>
<asp:Label ID="lblNama" runat="server"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblNIS" runat="server"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblUmur" runat="server"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblEmail" runat="server"></asp:Label><br />
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblPassword" runat="server"></asp:Label><br />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
5. Maka hasilnya akan sama seperti gambar di bawah ini
COMMENTS