Most of the time we implement the validation at server side, i.e. the form is posted to the server and if the model is invalid the response is sent back to the client and user is displayed with error messages.

The same feature can be achieved at client side, that means the form will be validated at client side, before it is posted to the server.

If the form validation passes, the form is posted otherwise the error message is shown.

The form is posted to above action method on submit. In the above method, we have accepted model object as parameter which triggers the model binding and result of model binding is ModelState. When the ModelState is invalid, the model object is returned with the View.

Till now we have seen how to implement the validation Server side. Lets see how to do it client side.

In order to make it work client side we need to make sure following below points.

1. Make sure below two keys are set to true in web.config.

Make sure the keys ClientValidationEnabled and UnobtrusiveJavaScriptEnabled are set to true in the Web.config file.

2. Do not forget to refer below javascript files in your View or in Layout if View refers Layout.

Once you made sure you followed above two points, the validation will happen on client side on form submission. If the form validation is success then form is posted to the server else error message is shown to user.