How to handle Client side validation and Server side validation in MVC

It is always good practice to have both Client Side and Server Side validation in your application. Sometimes when Javascript is disabled in your browser client side validations will not work i.e. end user input data cannot be validated and at runtime, we will get errors due wrong data entered. So in this case, if server-side validation is there in your application it will validate the user input before processing.

To enable Client-Side Validation we need to make some changes in our application.

In web.config file add below:

<appSettings>
  <add key="ClientValidationEnabled" value="true" />
  <add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>

Refer below Javascript libraries in your page where you want to enable the client side validation:

<script src="~/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

Do not change the order of.Js files as they are interdependent.

To enable server-side validation we can use attributes provided by MVC. Below are some examples:

[Required] : As name suggests it will not allow null values

[Range(typeof(DateTime),"01/01/2010","01/01/2018")]: Will not allow date out of the range specified

[DataType(DataType.Date)] : Allow only date values.

[DataType(DataType.CreditCard)]
[DataType(DataType.Currency)]
[DataType(DataType.DateTime)]
[DataType(DataType.EmailAddress)]
[DataType(DataType.Password)]