Form Validation in ASP.NET Core

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 )