Hello folks, on July 9th 2010, I'd spoken on EgyGeeks online community about Client-side Validation using jQuery in ASP.NET webforms, and I thought I'll share the session as a blog post, so let's start

Why using Client-side validation?

Web developers love to use Client-side validation to increase their web application user experience "UX", to make web application feels like the desktop application, and to reduce the round-trip to web server to validate the user inputs every time he/she submit a page.

Demo:

First of all I'm using one of the oldest and the first jQuery validation plugin called validation, please take a look ot its documentation for more info. [link]

Let's create a simple ASP.NET page to apply some of validation rules on:

First name:

Password:
Password Confirmation:

Email Address:

Now let's write our jQuery code to apply some validation rules on this ASP.NET form, but first make sure you create a link for jQuery .js file and the plugin validation.js file into the aspx page or you can use the Microsoft CDN version {hosted on Microsoft servers} " http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js" "http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js ":

As you can see it's so simple and easy to apply these validation, like required rule, which means this field is required field, and apply the email RegExp with email: true.

The .validate() function takes 2 parameters {rules, messages}, rules is the validation rules you want to apply, and message is the text message you want to appear to the user if he doesn't apply your validation rules on his inputs, and BTW message is optional {overload .validate() function} you can let the plugin display the default message according to the rule itself, for example here I let the plugin display the default message for TxtPassword Required rule.

Note: please use ASP.NET 4 new feature {ClientIDMode}, or use <%= txtFirstName.UniqueID %> when writing the Control ID inside jQuery script.

Please for more validation rules read the documentation I refer above.

Del.icio.us : jQuery ASP.NET Validation
Technorati : jQuery ASP.NET Validation

Hello folks today I'm going to review ASP.NET 4 validation controls in Visual Studio 2010; first let's explain why we need validation on our web application first.

Why do we need Validation in our web application?

For many reasons, I can't cover all here, but I'll cover most important reasons, which are:

1. Validate user input data: sometimes you need to make sure user puts the correct information in correct field, or correct type of information in its corresponding field.
2. Avoid XSS "cross-site scripting": one of way to avoid XSS from your web application is to validate the inputs from unreasonable characters.
3. Avoid SQL injection: validate the input parameters save your web application form SQL Injection attacks.

Note: To build secure web application, make sure Validation implemented on client-side and server-side.

Microsoft ASP.NET did a great job to make this easy task on web developer by implement both Server-Side and Client-Side in ASP.NET validation controls; even if you want to implement other client-side framework like jQuery or write your own client-side Javascript validation rules you can disable the client-side validation function in ASP.NET validation control.

First let's examine the validation controls that ASP.NET provides for us:

ASP.NET Validation Controls:

• CompareValidator: this control let you compare 2 user inputs, like make sure user puts the password twice correctly.
• CustomValidator: this control let you build/write your own Validation rule, both Server-side and client-side.
• RangeValidator: this control validates the input parameters with specific range with maximum and minimum value.
• RegularExpressionValidator: this control helps you implement a custom regular expression to validate the input data against, like telephone number.
• RequiredFieldValidator: this control is to make sure user fill this field, like Username.
• ValidationSummary: this control displays the summary of all Validation info on the page, to make sure user know what's wrong with his inputs.

Tip: you can use those Regular Expression cheat sheets to build your custom one. [link][link], or use this Regular Expression builder web app [link]

Second, let's build a sample an ASP.NET web from and implement some validation controls:

First Name: 

• Here we used RequiredFieldValidator to make sure user input his First name on the TxtFirstName TextBox by adding ControlToValidate="TxtFirstName" attribute, and customize the message will be display if there's validation error ErrorMessage="This field is required".

Last Name: 

• Here we used RegularExpressionValidator to validate that user enter at least 3 characters in the Last name TextBox by add this regular expression [0-9a-zA-Z]{3,}.

Email Address: 

• And here another implementation for RegularExpressionValidator, but this time to validate the user email address and here's the regulat expression for Email address ^([0-9a-zA-Z]([-.\w]*@([0-9a-zA-Z][-\w]*[0-9a-zA-Z]\.)+[a-zA-Z]{2,9})$

Age: 

• We implement RangValidator to make sure user age is between 13 and 85 years old.
  
  

Today we'll examine ClientIDMode the new feature of ASP.NET 4 which makes life easier on developers when writing client-side scripting/code like javascript or jQuery.

ClientIDMode control property:

You can assign ClientIDMode property for ASP.NET controls which is take 4 values

• AutoID
• Inherit
• Predictable
• Static

   

  

  And I'll demonstrate what the different between those 4 values.

Demo:

We've simple ASP.NET 4 page with Master page, with one button on it, and We'll set the ClientIDMode for the button control and examine what's happen when ASP.NET render it to HTML.

AutoID:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="AutoID" />

The Rendered HTML:

id="ctl00_ContentPlaceHolder1_btnSubmit" />

It's rendered like what ASP.NET 3.5 do, so if you want to renter control's ID like ASP.NET 3.5 set ClientIDMode to AutoID.

Inherit:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Inherit" />

The Rendered HTML:

id="btnSubmit" />

Actually it tells the control to defer to the naming behavior mode of the parent container control

Predictable (default):

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Predictable" />

The Rendered HTML:

id="ContentPlaceHolder1_btnSubmit" />

Remove the ugly default auto generated ID prefix "ctl00"

Static:

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Static" />

The Rendered HTML:

id="btnSubmit" />

It'll rendered the ID like what you set for ID attribute

Where you can set the ClientIDMode:

Web.config:

You can set the ClientIDMode in web.config file inside page tag

<configuration>

<system.web>

<pages ClientIDMode="Static" />

<compilation debug="true" targetFramework="4.0" />

system.web>

configuration>

Control:

Or you can set it for specific control, but remember the main control is inherit this property, and this what we do in the demo.

<asp:Button ID="btnSubmit" runat="server" Text="Button" ClientIDMode="Static" />

Page:

Or you can set the ClientIDMode on the page tag in the upper of ASPX file.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Demo.aspx.cs" Inherits="ClientIDModeDemo.Demo" ClientIDMode="Static" %>