The default ASP.NET MVC project template supports unobtrusive validation and automatically adds the required JavaScript libraries to your project. However, you'll notice that the default validation does not use the Bootstrap-specific CSS styles. When an input element fails validation, the jQuery validation plugin changes its class name to input-validation-error. This class name is declared inside the Site.css file and simply draws a red border around the invalid input element as displayed in the following screenshot:
Bootstrap's validation styles, however, set the invalid input element's associated label's font weight to bold and draw a red border around the element. The reason the jQuery validation plugin does not work with the Bootstrap validation styles is because Bootstrap does not apply the validation style to the input element but adds the has-error class name to the parent element:
<div class="form-group has-error">
<label class="control-label...