Working With Validation and Unobtrusive Validation in ASP.Net

Introduction

Today we'll learn how the validation process works in the Server controls. I am creating an ASP.NET Web Application in the Visual Studio 2013 with an Empty Project Template. You are thinking that it is very simple to apply validation to the server control in any application, but just hang on. You'll find something interesting here.

So, let's begin with the following procedure.

Create ASP.NET Application

In this section, we'll create the web application but it is a prerequisite that you create the application in Visual Studio 2013.

• A web application must be created in Visual Studio 2012 or later.

Step 1: Open Visual Studio 2013 and click on "New Project".

Step 2: Select the ASP.NET Web Application and enter the name for it.

Step 3: Select an Empty Project Template to proceed and click on "OK".

Visual Studio creates the Empty project with some files and references.

Adding Web Form

Step 1: Add a New WebForm to the project.

Step 2: Design the source of the Web Form with the following markup:

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

<div>    

    <table class="auto-style1">

        <tr>

            <td>

                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            </td>

            <td>

                <asp:RequiredFieldValidator ID="RequiredValidator1" runat="server" ControlToValidate="TextBox1"
 ErrorMessage="*"></asp:RequiredFieldValidator>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Button ID="Button1" runat="server" Text="Test" />

            </td>

            <td> </td>

        </tr>

        <tr>

            <td>

                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>

            </td>

            <td>

                <asp:RequiredFieldValidator ID="RequiredValidator2" runat="server" ControlToValidate="TextBox2"
 ErrorMessage="*"></asp:RequiredFieldValidator>

            </td>

        </tr>

        <tr>

            <td>

                <asp:Button ID="Button2" runat="server" Text="Check" />

            </td>

            <td> </td>

        </tr>

    </table>     

</div>

</form>

The code above is straight forward and there is nothing to specify.

Run Application

Now when you run the application in the browser, the Server Error will display in your browser as shown below:

Now you will check your code and there is nothing wrong in your code. Surprised? What is this? Let's make it simple. Proceed to the next step.

Unobtrusive Validation

This is the new type of  Data Annotation in the ASP.NET 4.5 framework. Web forms including validations tend to generate too much JavaScript in the page that is the 60% of your code. With the use of this validation you can make your code cleaner and tidier.

Add the following markup in your Web.Config file:

<appSettings>

    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"></add>

</appSettings>

Validation Process

Now when you click on the Test Button, both validation error messages will show such as shown below:

You didn't apply the second validation property but this is the general issue. Use the following procedure to overcome from this issue.

First Process: Set the ValidationGroup Property of the TextBox, Validator and Button to VG, that is the same for all three controls.

Or

Second Process: Update the Page_Load event with the following code:

protected void Page_Load(object sender, EventArgs e)

{

    string VG = Guid.NewGuid().ToString();

Button1.ValidationGroup = VG;

TextBox1.ValidationGroup = VG;

    RequiredValidator1.ValidationGroup = VG;

}

Now when you run the application and click on the Test button, only the textbox1 validator will show the error message.

Summary

This article described unobtrusive validation in the framework and how the validation process works in ASP.NET Web Applications. Thanks for reading.