Form Validation in ASP.NET Core
Hello friends, I hope you all are doing great. In today's tutorial, we will have a look at Form Validation in ASP.NET Core. It's our 15th tutorial in ASP.NET Core series. In our previous lecture, we have created a Registration Form for our engineering website. But we haven't added any validations on the submitted data.
So, even if users don't fill any boxes and just hit the Register Button, a new user will be created without any personal info. So, today we will place some checks on these text boxes to validate the user submitted data. So, let's get started with it:
Form Validation in ASP.NET Core
- Validations in ASP.NET Core are available in the form of attributes & Tag Helpers.
- Validation Attributes are applied on Properties in Model classes and validate the user submitted data.
- Validation Tag Helpers are used in Views and provide validation errors to the users.
- So, let's add few validations to our registration form and show errors, if inappropriate data is submitted.
Validation Attributes in ASP.NET Core
- ASP.NET Core has many builtin Validation Attributes to verify the incoming data, few of them are as follows:
- [Required] : Value is required.
- [Regular Expression] : Value must match the regular expression provided.
- [Compare] : Compares two properties i.e. Verify Email.
- [Range] : Value must lie between specified range.
- [MinLength] : Specifies the value's minimum length.
- [MaxLength] : Specifies the value's maximum length.
- [DataType] : Value must be of specified datatype.
- So, let's apply few of these Validation Attributes on our Properties in Engineers.cs file, placed in Models folder.
- We have already linked these properties with text boxes using asp-for Tag Helper.
- So, open this file & in Engineers class, place these validation attribute before properties, as shown in below figure:
- As you can see in above figure that before Username property, I have used two validation attributes i.e. Required & MaxLength.
- I have set the MaxLength to 50 and have also added a custom ErrorMessage.
- On the Email property, I have used Required & RegularExpression, this expression will verify the email format.
- On the FullName property, I have used Display attribute (it's not a validation attribute), and changed the name to "Full Name", it will change the label of this text box.
- Moreover, I have also made my enums properties null-able, as you can see I have placed ? sign infrom of DeptEnum & UniEnum. ( We will see later why null-able)
- We have added the validation attributes on our properties and now let's place a check in our Home Controllers class using builtin validation property.
Check if Data is Valid
- So, open you HomeController.cs class placed in the Controllers Folder.
- In HomeController class, we need to place validation check on the Registration action method of [HTTPPost] type, as this method is going to execute on pressing the Register button.
- As you can see in above code, I have placed an IF loop and have placed a Boolean property in it called ModelState.IsValid.
- This Boolean property will return TRUE, if there's no validation error & will return FALSE, if there's any validation error appeared.
- So, if it's true then I have added the submitted user data and displayed it in Info link by redirecting it to Info action method and if its FALSE, then simply returned the Registration View itself.
- One more thing to note here is that I have changed the return type of action method to IActionResult, as it contains both RedirectToAction() & View() result types.
Display Validation errors in ASP.NET Core
- Now it's time to display validation errors on the form itself, so now open your Registration.cshtml View file.
- Below each textbox, we need to add a <span> element, as shown in figure on right side.
- Inside this <span> element, I have use Validation Tag Helper named asp-validation-for and this Tag Helper is taking Username as a value.
- So, if there's any validation error appeared for Username, then it will be displayed here.
- Let's add this <span> element below all the textboxes, as shown in below figure:
- You can see in above figure, that I have placed <span> element containing asp-validation-for Tag Helper, below every input field.
- One more thing to note here is that I have added an option element Please Select, in both of my <select> tags, I have encircled them in above figure.
- Now let's run our application, and without entering any data, hit the Register button, and we will get validation errors, as shown in below figure:
- You can see in above figure that we are getting the Validation Error Messages for each component and at the end we have the summary of Validation errors.
- Moreover, for our Select boxes now we have a default option "Please Select", that's why we are getting Validation Errors for them as well, as now their value is null.
- If we select any option, then it will get value from the respective enum but in case of Please Select, its null-able and giving us Validation Error.
- We haven't added any Bootstrap design on these elements, as I want to keep things simple for now. ( We will design them later )
So, that was all for today. I hope you have enjoyed today's lecture. In next tutorial, we will have a look at detailed introduction to Entity Framework Core. Till then take care & have fun !!!