So let us learn some basics because I have written this article only focusing on beginners and students.
What Form Validation isEnsuring that data entered by the user into the form is proper and valid as per our business requirements is called as Form Validation.
Types of validation
- Client Side Validation
- Server Side Validation
Server Side ValidationValidation done at the server level after sending the form data to the server but before entering the data into the database is called server-side validation.
- Head Section
- Body Section
- External file
Let us first create the web application with two web pages as in the following:
- "Start" - "All Programs" - "Microsoft Visual Studio 2010"
- "File" - "New Website" - "C# - Empty website" (to avoid adding a master page)
- Give the web site a name, such as Validation or whatever you wish and specify the location
- Then right-click on the solution in the Solution Explorer then select "Add New Item" - "Default.aspx page" (add two pages).
The first page source code <body> tag will look as in the following:
The design view of the preceding source code will look as in the following:
There are three main methods shown in the above image in the red square to read the ASP.Net controls values; they are:
- getElementById: this method is used to read the controls values by their ID.
- getElementByName: this method is used to read the controls values by their Name.
- getElementByTagName: this method is used to read the controls values by their TagName.
- Right-click on Solution Explorer then select "Add New Item" then the in the script.js page rename the .js page as you wish, I have renamed it to UserValidation.js
- Create the function inside the UserValidation.js file named userValid() as:
Now declare the variable inside the function using the var keyword to read the ASP.Net control values by their ids and assign the values to the declared variable.
Now add the condition to ensure that all controls have a value, if the values are not entered in the form control then it will show a message. The condition will be as follows:
In the preceding condition, to ensure that the form control's values are blank the message Enter All Fields is shown to the user and finally we are returning false; that is very important.
Importance of returning falseIt's very important to use the return false statement after the condition block that return false so if validation determines that the business requirements are not met then the form cannot be submitted. If you do not return false then the message will be displayed to the user that all fields are required but the form will be post back and it gives you the second page directly. Therefore the return false statement works similar to the Required Field validator of ASP.NET.
I hope you understand the concept. The condition that checks both text boxes for password are as in the following:
Condition to determine if the email address is valid:
The entire function will be as follows:
I hope you have understood it then the Solution Explorer will look like as in the following:
Use the following code in the create button:
In the code above, only after validating the form data, the page is redirected to the UserLanding.aspx page.
Now run the ASP.Net web application and click on the Create button without inserting any data in the form, then it will show the following alert message.
In the preceding screen you clearly see that even I have written the code on the create button to redirect to the next page but it will not be redirected because the form data is blank and it does not satisfy our validation condition that we set.
In other words, it's clear that the validation is done at the client side in the browser level and only validates the data; it will execute the server-side code. Now enter the invalid Email Id, it will show the following message:
Now enter the password that does not match the confirm password, it will show the following message:
Now enter the valid details.
Now click on the "Create" button; it will redirect to the next page as in the following: