Validasi pada Form dengan ASP.NET Validation Control

Dani R Taufani

Search

Subscribe via Email

Email Notifications
Go

Archive

Pada artikel sebelumnya mengenai pembuatan Mail Form atau Contact Form secara sederhana,terkadang user salah memasukkan nama email atau format email tidak sesuai, ada nama yang menggunakan angka dimana hal itu tidak kita kehendaki dan mungkin ada field/kolom pada form yang terlewati atau tidak terisi. Hal-hal yang tidak kita inginkan pada form dapat kita validasi menggunakan ASP.NET Form Validation dimana di Visual Studio telah menyediakan control-control-nya, seperti berikut.

Langkah pertama unduh solution dari project Mail Form disini. Berikutnya kita tambahkan control ValidationSummary. Control ini nantinya akan memunculkan pesan-pesan ketika terjadi kesalahan saat kita melakukan pengisian form.

   1: <asp:ValidationSummary ID="ValidationSummary" runat="server" CssClass="error"

   2:     DisplayMode="BulletList" ForeColor="" HeaderText="Any something wrong on:" />

Berikutnya kita mempunyai policy bahwa pada field Name dan Email required atau tidak boleh kosong untuk itu gunakan control RequiredFieldValidator.

   1: <asp:RequiredFieldValidator ID="reqName"  runat="server" ControlToValidate="txtName"

   2:     ErrorMessage="Field Name" CssClass="form-required"><span class="required-field">Required</span>

   3: </asp:RequiredFieldValidator>

Perhatikan bahwa code diatas terdapat properti ControlToValidate yang berfungsi menentukan ID dari control apa yang akan dilakukan validasi. Lakukan juga pada field Email.

Selanjutnya pada field email kita dapat menggunakan control RegularExpressionValidator. Control ini berguna untuk memvalidasi struktur email yang diketikkan oleh user. Seperti kita tahu pada email harus terdapat “@” dan “.” Jika anda belum paham mengenai Regular Expression (RegEx) anda dapat mengunjungi referensi berikut.

Pada properti ValidationExpression klik tombol … maka akan muncul window Regular Expression Editor dan pilih Internet e-mail address.

   1: <asp:RegularExpressionValidator ID="RegExEmail" runat="server"

   2:     ErrorMessage="Field Email" ControlToValidate="txtEmail"

   3:     ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"

   4:     Display="Dynamic"><span class="required-field">Your email not valid</span>

   5: </asp:RegularExpressionValidator>

Properti Display=”Dynamic” berguna ketika dalam satu control terdapat multi validation, nantinya ketika validator memunculkan message error maka lokasinya akan berpindah mendekati ke control yang kita validasikan.

Berikut final source code-nya.

       1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DemoEmailForm._Default" %>

       2:  

       3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

       4: <html xmlns="http://www.w3.org/1999/xhtml">

       5: <head runat="server">

       6:     <title>Email Form</title>

       7:     <link href="css/screen.css" rel="stylesheet" type="text/css" />

       8: </head>

       9: <body>

    <div class="container">

        <h2>Contact Me</h2>

        <form id="form1" runat="server">

        <div class="span-12">

        <asp:Panel CssClass="success" ID="pnlSuccess" runat="server" Visible="false">

                Your email was sent succesfully.

        </asp:Panel>

        <asp:Panel CssClass="error" ID="pnlError" runat="server" Visible="false">

                <p>Your email was not send due to an error.</p>

                <p>Error Message: <asp:Literal ID="ltErrorMessage" runat="server" /></p>

        </asp:Panel>

            <asp:ValidationSummary ID="ValidationSummary" runat="server" CssClass="error" 

                DisplayMode="BulletList" ForeColor="" HeaderText="Any something wrong on:" />

            <p>

                <asp:Label ID="lblName" AssociatedControlID="txtName" runat="server" Text="Name"></asp:Label><br />

                <asp:TextBox ID="txtName" CssClass="text" runat="server"></asp:TextBox>

                <asp:RequiredFieldValidator ID="reqName"  runat="server" ControlToValidate="txtName" 

                    ErrorMessage="Field Name" CssClass="form-required"><span class="required-field">Required</span></asp:RequiredFieldValidator>

            </p>

            <p>

                <asp:Label ID="lblEmail" AssociatedControlID="txtEmail" runat="server" Text="Email"></asp:Label><br />

                <asp:TextBox ID="txtEmail" CssClass="text" runat="server"></asp:TextBox> 

                <asp:RequiredFieldValidator ID="reqEmail"  runat="server" ControlToValidate="txtEmail" 

                    ErrorMessage="Field Email" CssClass="form-required" Display="Dynamic"><span class="required-field">Required</span></asp:RequiredFieldValidator>

                <asp:RegularExpressionValidator ID="RegExEmail" runat="server" 

                    ErrorMessage="Field Email" ControlToValidate="txtEmail" 

                    ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" 

                    Display="Dynamic"><span class="required-field">Your email not valid</span></asp:RegularExpressionValidator></p>

            <p>

                <asp:Label ID="lblMessage" AssociatedControlID="txtMessage" runat="server" Text="Message"></asp:Label><br />

                <asp:TextBox ID="txtMessage" runat="server" TextMode="MultiLine"></asp:TextBox></p>

            <asp:Button ID="btnSubmit" runat="server" Text="Send Message" OnClick="btnSubmit_Click" />

        </div>

        </form>

    </div>

</body>

</html>

Conclusion

Jika kita perhatikan, validasi yang dilakukan oleh validation control berjalan pada client side. Dengan menggunakan validation control yang dirender di server dan kemudian menghasilkan javascript code. Hal ini sangat memudahkan kita, terutama bagi developer yang belum terlalu memahami mengenai javascript. Untuk lebih memahami mengenai ASP.NET Validation Contol dapat menyimak dua tautan berikut:

---
Follow @danitaufani untuk mendapatkan update blog ini. Happy coding!

Posted Dec 08 2010, 12:16 PM by Dani R Taufani

Filed under: .NET Framework 4, ASP.NET

Comments

Twitter Trackbacks for Validasi pada Form dengan ASP.NET Validation Control - Dani R Taufani - Microsoft User Group Indonesia [mugi.or.id] on Topsy.com wrote Twitter Trackbacks for Validasi pada Form dengan ASP.NET Validation Control - Dani R Taufani - Microsoft User Group Indonesia [mugi.or.id] on Topsy.com

on 12-08-2010 13:02

Pingback from Twitter Trackbacks for Validasi pada Form dengan ASP.NET Validation Control - Dani R Taufani - Microsoft User Group Indonesia [mugi.or.id] on Topsy.com