Part 6 Validator Control

M.Suryo Pranoto suryodesign@yahoo.co.id http://suryodesign.asia www.suryodesign.wordpress.com Lisensi Dokumen:

Copyright 2003-2009 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang, kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.

Pendahuluan
Berselancar di dunia sudah merupakan kegiatan sehari-hari bagi kita pecinta komputer , banyak hal yang bisa kita temukan pada internet ini. Seperti pada forum ataupun pada blog-blog yang ada , sebelum kita dapat menggunakan forum / blog yang ada , kita mesti registrasi terlebih dahulu untuk dapat mendaftar menjadi anggota , tanpa kita sadari dalam proses pendaftaran tersebut pada form anggota terjadi beberapa validasi agar user tidak sembarang memasukkan data atau membiarkan field tersebut kosong. Disini kita akan membahas bagaimana memvalidasi form menggunakan Validator Control. sebelumnya saya ucapkan selamat membaca artikel ini ^^

Isi
Validasi merupakan suatu hal yang paling umum digunakan terutama pada User Interface Input Data / Registrasi data untuk menampilkan kesalahan , setiap programmer memiliki cara yang berbeda untuk menampilkan dan menghandle kesalahan yang ada , mulai dari clientside vbscript , javascript hingga serverside seperti PHP, JSP , ASP Code , intinya dari semua code adalah sama yaitu untuk mem-validasi / menguji / menentukan semua inputan dari user apakah valid atau tidak untuk di proses selanjutnya. Dalam ASP.NET validator control di bagi menjadi beberapa bagian sesuai dengan fungsi / kegunaaan masing masing validator seperti berikut : RequiredFieldValidator , RangeValidator , CompareValidator , RegularExpressionValidator , CustomValidator, SummaryValidator.

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Validator Control
RequiredFieldValidator RangeValidator

Description
Validasi yang tidak memperbolehkan input control mengandung empty string Validasi yang digunakan untuk mengecek value agar berada di dalam minvalue dan maxvalue , dapat juga digunakan untuk alphabet dan date Untuk membandingkan Input Control yang satu dengan Input control / value yang lainnya Control Valid bila sesuai dengan pola yang ada Method yang dapat digunakan untuk menghandle validasi dari nilai yang di masukkan yang di dapat didefinisikan sesuai kebutuhan user Untuk menampilkan pesan kesalahan yang terjadi

CompareValidator RegularExpressionValidator CustomValidator

SummaryValidator

Syntax untuk membuat Validation Server Control :

<asp:control_name id="some_id" runat="server" />

Contoh Required ValidationServerControl :

<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ></asp:RequiredFieldValidator>

Validator Control sangatlah berguna untuk menentukan user input dan reporting error dan mudah untuk digunakan , kita akan belajar menggunakan control ini pada page halaman yang ada dan juga menentukan dengan regex dan juga menampilkan pesan kesalahan yang ada , bila kita tinjau kembali bahasa pemprograman umumnya untuk melakukan validasi HTML input control tidak memiliki feature yang ada dan mengandalkan javascript untuk mengecek validasi yang ada , ASP.Net memudahkan kita dengan fitur ini dan menyediakan framework dari validation control yang dapat kita manage dan menyediakan fitur error otomatis yang dapat kita gunakan. Validation Control tidak hanya dapat digunakan untuk single input control saja , tetapi juga dapat digunakan untuk lebih dari satu input control dan juga setiap input control juga dapat digunakan beberapa type validator control yang ada.

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Validation Process Kita dapat menggunakan validator control untuk otomatis menguji halaman / page yang kita miliki ketika user menekan submit atau melakukan perubahan dalam suatu control. Ketika menggunakan validasi , user menerima halaman Norman da memulai untuk mengisi control yang ada , ketika user finish dan user menekan button submit untuk finish , maka setiap Validation akan bekerja , setiap button memiliki CasueValidation Property yang dapat di set nilainya menjadi True atau False , Aksi yang di jalankan oleh user ketika user men-Submit tergantung dari Cause Validation property ini : 1.Bila CausesValidation bernilai false, maka ASP.NET tidak akan menjalankan validasi control yang ada dan page / halaman akan di post kembali dan code kita akan berjalan normal. 2.Bilai CausesValidation bernilai true ( Nilai Default ) , maka ASP.NET akan otomatis mem-validasi setiap page ketika user menekan tombol submit, setiap control akan dijalankan dan bilai menemukan kegagalan / validasi yang tidak sesuai

regular expressions syntax : Character Description Escapes Ordinary Karakter selain .$^{[(|)*+?\. characters \b backspace. \t tab. \r carriage return. \v vertical tab. \f form feed. \n Baris Baru / New Line Bila diikuti dengan special karakter seperti salah satu dari (.$^{[(|)*+?\), \ Karakter ini sama dengan literal seperti \+ sama dengan + karakter.

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Contoh Penggunaan Regex : Character Class . [aeiou] [^aeiou] [3-7a-dA-D] \w \W \s \S \d \D Description Semua Karakter kecuali \n. Valid bila salah satu karakter ada Valid bila karakter tidak ada dalam Range Karakter sepert 37, ad, AD Valid dengan word karakter , termasuk underscore (_). Valid bila nonword karakter Sama dengan whitespace karakter(space, tab, form-feed, newline, carriage return, atau vertical feed). Valid dengan semua nonwhitespace karakter Decimal karakter NonDecimal karakter

Quantifiers : Quantifier * + ? {N} {N,} {N,M} Description Tidak ada atau digunakan beberapa kali tetap valid Satu atau lebih dikatakan valid Tidak ada atau satu di katakana valid Sama dengan karakter N Sama dengan N dan beberapa karakter lainnya N dan M karakter

Berikut adalah contoh regex:

[aeiou]{2,4}\+[1-5]*

String mesti match dengan expression , dan minimal berjumlah 2 huruf dan maximal 4 huruf , memiliki tanda + minimal 1 karakter dan diikuti dengan digit dengan nilai 1 5.

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Berikut beberapa contoh Regex : Regular Content Description Expression E-mail Checks for an at (@) sign, dot (.), and only allowed \S+@\S+\.\S+ address* nonwhitespace characters. Any sequence of word characters (letter, space, or Password \w+ underscore). SpecificWord karakter dengan minimal 4 karakter dan panjang 10 length \w{4,10} karakter. password Mengizinkan 4 hingga hingga 10 karakter , karakter Advanced [a-zApertama mesti dalam range a-z atau A-Z dan kemudian password Z]\w{3,9} diikuti dengan word karakter sebanyak 3 hingga 9 karakter Dimulai dengan letter karakter a-z atau A-Z, diikuti dengan boleh ada dan tidak adanya word karakter dan Another diikuti dengan digit dan kemudian diikuti dengan word [a-zAadvanced karakter , ini dapat kita gunakan untuk membuat password Z]\w*\d+\w* password minimal mengandung 1 digit atau lebih dalam pattern / pola nya agar password memiliki Strong Combination Limitedlength field Social Security number Seperti Contoh Password mengijinkan 4 hingga 10 karakter , dan juga mengijinkan special karakter seperti asterisks, ampersands ( seperti % dll ) Urutan dari 3 digit , 2 digit , kemudian 1 digit , dimana setiap group di pisahkan dengan strip. Banyak digunakan untuk telpon Description Property yang digunakan untuk menentukan apakah validator bernilai valid atau tidak dengan mengecek object pada control yang divalidasi Untuk Menampilkan pesan error yang akan di display kepada Menjalankan Validasi Object untuk mengubah value dari isValid Mengidentifikasi Control dari inputan bisa berupa textbox dan lainnya Menentukan bagaimana error ditampilkan kepada user Mengijinkan client side validasi pada sisi user 5

\S{4,10} \d{3}-\d{2}\d{4}

Validator properties and methodsProperty or Method IsValid property ErrorMessage property Validate method Control To Validate Display EnableClientScript

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Berikut kita akan membahas Lebih dalam tentang Validator : RequiredFieldValidator Control : Property ini banyak digunakan untuk mengecek apakah User menginput data atau tidak maksudnya apakah suatu textbox itu kosong atau memiliki value / nilai / diisi oleh user . berikut adalah bagaimana RequiredFieldValidator digunakan :
<asp:TextBox ID="txtPass1" runat="server" MaxLength="6" ValidationGroup="tes" Width="110px" ></asp:TextBox> <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="txtPass1" ErrorMessage="Password Tidak Boleh Kosong" SetFocusOnError="True" Display="None"></asp:RequiredFieldValidator>

CompareFieldValidator Control : Banyak digunakan untuk membandingkan nilai pada textbox atau field yang ada , banyak digunakan untuk membanding Password untuk menu registrasi seperti berikut :
<asp:TextBox ID="txtPass1" runat="server" MaxLength="6" ValidationGroup="tes" Width="110px" ></asp:TextBox> <asp:TextBox ID="txtPass2" runat="server" CssClass="style3" ValidationGroup="tes" Width="109px" ></asp:TextBox> <asp:CompareValidator ID="CompareValidator1" runat="server" ControlToCompare="txtPass1" ControlToValidate="txtPass2" Display="None" ErrorMessage="Password Tidak Match"></asp:CompareValidator>

RangeValidator Control merupakan tipe lain validator untuk menentukan apakah control bernilai valid atau tidak di dalam range yang ditentukan , property yang mesti diperhatikan adalah MaximumValue, MinimumValue , dan Type
<asp:TextBox ID="txtUsia" runat="server" MaxLength="10" ValidationGroup="tes" Width="186px"></asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="txtUsia" ErrorMessage="Umur Anda Belum Cukup, Umur Mesti 15 - 25 Tahun" MaximumValue="25" MinimumValue="15" SetFocusOnError="True" Display="None"></asp:RangeValidator> Tahun Mesti Lebih dari 1998: <asp:textbox id="textbox1" runat="server"/> <asp:RangeValidator id="valRange" runat="server" ControlToValidate="textbox1" MaximumValue="12/31/1998" MinimumValue="1/1/1998" Type="Date" ErrorMessage="* Tanggal antara 1/1/1998 dan 12/13/1998" Display="static">*</asp:RangeValidator> Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

RegularExpressionValidator Control : merupakan validasi menggunakan pola yang ditentukan , anda dapat melihat pola-pola berdasarkan table di atas , regex merupakan validasi pola yang sangat berguna sekali , apapun modelnya dapat dilakukan dengan validasi ini , banyak digunakan untuk menentukan validasi email
<asp:TextBox ID="txtKredit" runat="server" MaxLength="10" ValidationGroup="tes" Width="186px"></asp:TextBox> <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ControlToValidate="txtKredit" Display="None" ErrorMessage="Kartu Kredit Number &amp; 10 Digit" SetFocusOnError="True" ValidationExpression="^[0-9]{10}$"></asp:RegularExpressionValidator>

CustomValidator Control : Merupakan validasi yang dapat kita tentukan sendiri mulai dari value boleh kosong atau tidak , panjang karakter , pola dan lain2 , dapat digunakan untuk memanggil javaScript juga .
<asp:TextBox ID="txtNama" runat="server" ValidationGroup="tes" MaxLength="20" Width="183px" ></asp:TextBox> <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Nama Tidak Boleh Kosong" ControlToValidate="txtNama" Display="None" ValidateEmptyText="True" OnServerValidate="cekValue" Font-Bold="True" ForeColor="#3399FF" ></asp:CustomValidator>

Dapat kita lihat Custom Validator diatas mmanggil OnserverValidate =cekValue , maka buatlah suatu fungsi cekValue pada default.aspx.cs seperti berikut :
protected void cekValue(object sender, ServerValidateEventArgs e) { if (e.Value.Length != 0) { e.IsValid = true; MessageBox.Show("Selamat Datang Di Suryo Blog"); Response.Redirect("http://www.suryodesign.wordpress.com"); } else { e.IsValid = false; } }

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Validation Summary Control : Merupakan Control untuk menampilkan pesan kesalahan yang ada terhadap validator-validator yang digunakan , jadi seperti requriedFieldValidator tidak mesti menggunakan errorMessage untuk menampilkan kesalahan tetapi dapat juga ditampilkan pada Validation Summary, berikut adalah contoh ValidatorSummary :

<asp:ValidationSummary ID="ValidationSummary1" runat="server" Width="384px" BackColor="#400000" BorderColor="Red" BorderStyle="Solid" Font-Bold="True" ForeColor="#3399FF" />

Ingat baik-baik penggunakan runAt Server , agar semua control dapat divalidasi atau dapat dilakukan dan guanakan juga Page.Isvalid statement.
<form id="form1" runat="server">

Berikut adalah Tampilan Awal Design Menu Registrasi :

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

Dan Berikut ini adalah Menu Ketika Di Submit akan menampilkan error yang tidak sesuai dengan validator.

Penutup
Tidak begitu sulit untuk bisa menguasai menu ValidatorControl ini karena microsoft menyediakan fitur yang begitu mudah untuk dapat kita pahami dengan cepat. Untuk mendapatkan source file anda bisa men-download di www.suryodesign.asia/freedownload atau anda juga bisa membacanya / melihatnya www.suryodesign.wordpress.com . Sekian dari saya dan sampai berjumpa di artikel selanjutnya setelah anda menerapkan ini ^^ .

Komunitas eLearning IlmuKomputer.Com

Copyright 2003-2009 IlmuKomputer.Com

REFERENSI : MSDN 2008 http://msdn.microsoft.com http://wikipedia.com/ http://www.microsoft.com www.w3schools.com/ http://asp.net-tutorials.com/ Ebook : press.Beginning.ASP.NET.2.0.in.C.Sharp.2005 http://www.dotnetjunkies.ddj.com/quickstart/aspplus/doc/WebValidation.aspx http://www.cs.odu.edu/~wild/cs477/spring03/aspNet7.htm

Biografi Penulis

M.Suryo Pranoto Alumni Mahasiswa Perguruan Tinggi Universitas Bina Nusantara , Aktif dalam beberapa komunitas komputer , dan beberapa project terutama berbasis aplikasi seperti VB.Net atau C#,dan sedang berusaha keras untuk menabung dan berencana untuk melanjutkan Cisco CCNP setelah menyelesaikan CCNA , memiliki hobby untuk sharing mengenai komputer mulai dari software hingga jual beli hardware maupun modding komputer. Ym : suryolovetyka , Email : suryodesign@yahoo.co.id , Website : www.suryodesign.asia Blog : www.suryodesign.wordpress.com Ilmu Komputer : http://ilmukomputer.org/author/suryodesign/

Komunitas eLearning IlmuKomputer.Com

10

Copyright 2003-2009 IlmuKomputer.Com