Client Side Required Field Validator Sample in MVC: Day 26

In this article we will see how to apply a required field validator from the client side in MVC.

1. Create a MVC project from the "Empty" template.
   
   
2. Right-click on "Models", select "Add" >> "Class…"
   
   
   
   
3. Name the class as "Employee" and click on the "Add" button.
   
   
   
   
4. In the employee class create employee properties like EmployeeId, FirstName, LastName and so on.
   
   
   
   
5. Now add a controller. Right-click on "Controllers", select "Add" >> "Controller…".
   
   
   
   
6. Select "MVC 5 Controller - Empty" to add an empty controller.
   
   Click on the "Add" button.
   
   
   
   
7. Name the controller as in the following:
   
   
   
   
8. Now add a view. Right-click on the "Index" action method and select "Add View…".
   
   
   
   
9. Name the view as "Index".
   
   Select "Empty (without model)" from the template.
   
   Click on the "Add" button.
   
   
   
   
10. Now add two action result methods to the employee controller with the same name. One is for HttpGet and the other is for HttpPost. In the HttpPost "Create" method pass an Employee class object as a parameter. When we press the submit button it will call this HttpPost method.
    
    
    
    
11. To add a view for the "Create" method, right-click on the "Create" action result method and select "Add View…".
    
    
    
    
12. Name the view as "Create".
    
    From the model class drop down, select "Employee" as model.
    
    Click on the "Add" button.
    
    
    
    
13. It will automatically create a view from the model.
    
    
    
    
14. Add a new folder to the root directory. Right-click on the project, select "Add" >> "New Folder".
    
    
    
    
15. Name the folder as "Scripts".
    
    
    
    
16. Add the highlighted four ".js" files to the script folder.
    
    
    
    
17. Add a reference of these JavaScript files to the head section of create.cshtml.
    
    
    
    
18. Add the "[Required]" attribute to the field that you want to make mandatory for insertion. The required attribute requires the "System.ComponentModel.DataAnnotations" namespace.
    
    
    
    
19. Run the project and call the "Create" action method of the Employee controller from the browser.
    
    
    
    
20. Now do not fill in the form and press the "Create" button and you can see the error message against the fields where we set the "Required" attribute in the model.
    
    
    
    << Strongly Typed View Create Sample in MVC: Day 25