Form Validation in ASP.NET Core Web Application with Razor Pages | Validate Forms using BindProperty

in this video I will show you how to make form validation using asp.net web application so here we have this simple contact form and if we click on submit we can see that here we have a validation error and also we have error messages for the required fields now let's provide some fields of this form so let's provide the first name the last name and the email address let's click on submit so this time we don't have any error with the first name or the last name with the email address but the message is required so for this reason we still have this error message now let's provide the message let's click on submit and this time we have this success message your message has been received correctly also the form has been initialized now let's create a new eraser page in the pages folder let's select razor page empty then add and here let's select the Razer page empty and let's call it contact.cshtml then in this file which is contact.cshtml let's create our contact form so first let's create a row and inside this row let's create a calendar and to display this column in the center of the row we can use the class mx02 then let's add rounded border so here let's add rounded then border and also we need to add some paddings and inside this column we can display the title of this page so here we will display the text contact form and we will display it in the center of the color now let's create our form so this form will be submitted to the same page so we don't need to define the action but it will be submitted using the post method so here we have to define the method then let's create the first field of this form so in this row we have a label with the text first name also we have this input field which is called first name so the name here is the name of the parameter that will be submitted to the server and the value will be the value of this input field now let's copy this div and let's create another field inside this form so the second field will be for the last name so here in the label let's write last name and let's rename this input field so let's call it last name now let's create another row for the email address so in the label let's write email and let's call this input field email let's create another row for the phone number and the label let's write phone and let's call this input field phone now let's create another row for the subject so in the label let's write subject and we don't need an input field and instead we will use a select element so let's delete this input field and let's create a select element so here we have the select element it is called subject so subject here is the name of the parameter that will be submitted to the server and here we have four options so the values that we have here are the values that will be visible to the user and the values that we have here are the values that can be submitted to the server now let's create another row for the message so here we have the label with the text message and we have a text area which is called message so message here is the name of the parameter that will be submitted to the server now let's create a last row for the submit button so in this row we have this button which is of type submit and the text that will be visible to the user is submit so when we submit the form it will be submitted using the post method now let's go to the model so we can make a right click then view code and inside this model we have the on get method but the Forum will be submitted using the post method so we need to implement the on post method then we need to create public properties that will receive the data of the form we can create them just here so they should be public the first property will be for the first name so it is of type string let's call it first name and let's initialize it with an empty value then let's create the last name then the email address so let's call it email then we need another property for the phone number so we can call it just phone then we need another property for the subject and the last property will be for the message then we need to bind these properties to the form so to bind these properties to the form we have to decorate them with the attribute bind property or also we can decorate the class itself with the attribute bind properties so if all the properties of this class will be bound to the form then we can decorate the class with bind properties but if only some of these properties are bound to the form in this case we have only to decorate the corresponding properties so in this example I will decorate all of these properties with bind property attribute so here we have to add brackets then bind property and we have to use this attribute to decorate all the properties foreign now we need to add all of these properties to the form so let's go to the contact page and we need to add the first name to this input field so we can delete this attribute and let's use asp4 Tag helper and we will bind the first name property of the model to this input field so here we have to write first name and if we have any error related to the first name then we can display it just after this input field so we need to create a span and in this pen we have to use the tag helper called ASP validation for then here we have to provide the name of the property which is first name and also we can use a bootstrap class to display the error message using the red color so here the bootstrap class is called text Danger now let's bind the last name to the second input field which is this one so let's delete this attribute let's write asp4 and the name of the property which is last name then we need to create a span so we can copy this one let's add it here and let's change the name of the property then here let's bind the email property to this input field and let's add a spell so it is for the email property now let's do the same thing with the phone number let's add a span now let's bind the subject property to the select element and also we can add a span now let's bind the message property to this text area let's add asp4 and the name of the property which is message also we need to add a span for any validation error so here let's write message now let's test the application and we obtain this contact form so here we have the first name the last name the email address the phone number the subject and the message and if we click on the select element we have four options now let's click on this submit button and here we can see that we have validation errors for the required Fields so the first name is required the last name is required the same thing for the email address the phone number and for the message now let's try to provide the first name and the last name let's click on submit so this time we don't have the error for the first name and for the last name but the other fields are required so let's try to fill all the form let's click on submit and this time we don't have any error now I will show you how to customize the error messages and how to make some Fields optional for example let's suppose that we want that the phone number is optional so I will show you how to do this and finally I will show you how to clear the form if the data validation is successful so to customize the error message we need to add the required attribute so just here we can add another attribute called the required and here we can see that we have this error this is because we need to add the data annotations namespace then to customize the error message we have to add parenthesis then we need to define the error message property so it is called error message and we have to provide it with a custom value so for example let's say that the first name is required now let's copy this statement and let's add it to the last name so here let's write the last name is required let's do the same thing with the email address so here the email address is required but the phone number is optional so to make the phone number optional we have here to add question mark so with this question mark the phone number can be none so it becomes optional and also the message is required so to check if the form validation was successful or not we can use model state so let's go to the on post method and here let's add a condition so if then exclamation mark then model State DOT is valid so if the model state is not valid this means that we have a validation error in the form in this case we can display an error message to the user and we can exit the on post method so to display the error message to the user we can create two public variables let's call the first variable success message and let's initialize it with an empty value then let's create another variable called error message so it is public string and of course let's initialize it with an empty value so if the model state is not valid then we can display an error message so here let's write error message and for the error message we can display for example data validation failed and of course we need to exit the on post method else the data validation was successful in this case we can display a success message so here the success message will be your message has been received correctly and after displaying the success message we need to clear the form so let's initialize all the properties that are bound to the form so here we will initialize all the properties with an empty value and to apply the new values of these properties we have to add another statement so here the other statement is model state DOT clear now let's display the error message or the success message in the page so let's go to the page and just after the title of this page we can display the error message or the success message so if the error message is not empty then we will display an alert so it is a bootstrap alert of type warning and here we will display the error message but if we have a success message then we will display another alert of type success and here we will display the success message now let's test the application let's click on submit so here we can see that we have this error message which is data validation failed and also here we have our custom error message also we don't have any error message for the phone number because it is optional now let's fill the form let's click on submit and here we have this success message your message has been received correctly also the form has been initialized

Channel: BoostMyTool

Views: 6,996

Keywords:

Id: WLk8tfQdx0I

Length: 16min 39sec (999 seconds)

Published: Wed Mar 01 2023