Lesson Objectives
A. Performing Form Validation using Validation
B. Client-side and Server-side validation
C. Demonstration: Performing Validation using Validation Controls
Needs are;
A.Asp.NET
B. Visual Studio
C. C#
The difficulty level of commands we use is middle.
Validation of User Input
Validation is the process of checking the values entered by users for correctness. For example, the age entered by a user should be a numeric.The Email ID entered by a user should be in a proper format. Validation is done to avoid errors during processing the input from the user and to ensure that valid data is entered by the user.
Client-side and Server-side validation
Validation can be done on the browser or on the server. Accordingly it is classified as Clientside validation and Server-side validation. JavaScript can be used to do client-side validation. C#.NET is used as the scripting language for server-side validation. Client-side validation has an advantage as the validation is done instantly on the client itself and the server need not do the validation. This helps the server to process data faster as the server need not do the validation. On the other hand server-side validation provides more security as the validation is done on the server and is hidden from the client.
Validation Controls:
ASP.NET provides several validation controls which act as a mechanism for checking the user input for its correctness. The validation check may be for a specific format or a valid range of data. The various validation controls are RequiredFieldValidator, RangeValidator,RegularExpressionValidator, CompareValidator, CustomValidator ,ValidationSummary and DynamicValidator.
The Toolbox with Validation Controls is given below:
[IMAGE: https://i.hizliresim.com/lOP72E.png]
The RequiredFieldValidator control is used to check if the user has entered data in the control and did not leave it empty. Below is the code for the RequiredFieldValidator which checks if the user has entered a value in the txtNameTextBox.
The RegularExpressionValidatorcontrol is used to check if the user has entered a value which matches a regular expression. Below is the code for the RegularExpressionValidator which checks if the user has entered a valid Email ID in the txtEmailTextBox.
The CustomValidator control is used to validate the data entered by the user using a userdefined function. Below is the code for the CustomValidator which checks if the user has entered a password which is at least 6 characters or greater.
The CompareValidatorcontrol is used to check if the user has entered a value which matches the value in another control. Below is the code for the CompareValidator which checks if the user has entered the same password in the txtPassword and txtConfirmPasswordTextBoxes.
The ValidationSummarycontrol is used to display a summary of all the validation errors in the web page. Below is the code for the ValidationSummary which displays all the errors in the web page.
Demonstration: Performing Validation using Validation Controls.
Steps to create the Web Page
1 ) Create a new web form named ValidationControlsDemo.aspx
2 ) Design the form as below by reusing the table and controls created in the
WebServerControlsDemo. Add a TextBox to accept Age. Add the required Validation Controls.
[IMAGE: https://i.hizliresim.com/1Jayn1.png]
3 ) The various controls and their properties to be used to design the form are given in the table below:
[IMAGE: https://i.hizliresim.com/Z9jDWA.png]
[IMAGE: https://i.hizliresim.com/G9WYE7.png]
4 ) Write the code for ValidationControlsDemo.aspx file
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="ValidationControlsDemo.aspx.cs"
Inherits="ValidationControls_RequiredFieldValidatorDemo" %>
Validation Server Controls Demo
#form1
{
height: 612px;
width: 991px;
}
function chkPassword(oSrc, args) {
args.IsValid = (args.Value.length > 6);
}
Customer Registration
Form
Customer Name
Customer Address
Gender
Age
Email ID
Password
Confirm Password
Subscription
--Select--
Quarterly
Half Yearly
Anually
Area Of Interest
5) Write the code for ValidationControlsDemo.aspx.cs file. The “btn_Submit_Click” is
a server-side event handler which is invoked when the user clicks the Submit button after
he fills the form. The “btn_Reset_Click” is a server-side event handler which is invoked
when the user clicks the Reset button to clear the values in the form.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class ValidationControls_RequiredFieldValidatorDemo :
System.Web.UI.Page
{
protected void btnSubmit_Click(object sender, EventArgs e)
{
lInfo.Text = "You have entered the following information ";
lInfo.Text = lInfo.Text + "Customer Name :" + txtName.Text +
"";
lInfo.Text = lInfo.Text + "Customer Address :" + txtAddress.Text +
"";
if (rbMale.Checked == true)
lInfo.Text = lInfo.Text + "Gender : Male";
if (rbFemale.Checked == true)
lInfo.Text = lInfo.Text + "Gender : Female";
lInfo.Text = lInfo.Text + "Age :" + txtAge.Text + "";
lInfo.Text = lInfo.Text + "Email ID :" + txtEmail.Text + "";
lInfo.Text = lInfo.Text + "Password :" + txtPassword.Text + "";
lInfo.Text = lInfo.Text + "Confirm Password :" + txtConfirmPassword.Text +
"";
lInfo.Text = lInfo.Text + "Subscription :" + ddlSubscription.SelectedValue +
"";
lInfo.Text = lInfo.Text + "Areas of Interest : ";
if (chkBooks.Checked == true)
lInfo.Text = lInfo.Text + " Books";
if (chkComputers.Checked == true)
lInfo.Text = lInfo.Text + " Computers";
if (chkMovies.Checked == true)
lInfo.Text = lInfo.Text + " Movies";
}
protected void btnReset_Click(object sender, EventArgs e)
{
txtName.Text = "";
txtAddress.Text = "";
rbMale.Checked = false;
rbFemale.Checked = false;
txtAge.Text = "";
txtEmail.Text = "";
txtConfirmPassword.Text = "";
ddlSubscription.SelectedIndex = 0;
chkBooks.Checked = false;
chkComputers.Checked = false;
chkMovies.Checked = false;
lInfo.Text = "";
}
}
6 ) Run the form. Click the submit button without entering any values. You will find the output below:
[IMAGE: https://i.hizliresim.com/rOXQR7.png]
The above output displays the error messages produced by the RequiredFieldValidator controls and the summary of errors in the ValidationSummary control.
7 ) Stop the Application and run the web page again. Enter valid values for Customer Name and Customer Address. Enter invalid values for Age, Email ID, Password and Confirm Password fields and submit the form. You will find the output below :
[IMAGE: https://i.hizliresim.com/JQ8YAQ.png]
Posted on Utopian.io - Rewarding Open Source Contributors
