Using HTML Validation Popups with jQuery Unobtrusive Validations

Question

I have an ASP.NET MVC site that uses Data Annotations for validations and I'd like to get "free" client-side validations. Most simple ones work well and Foolproof helps me with more complex scenarios. All is good so far.

However, I'd like to tie into HTML5 validations with browser support. Specifically, I want to use the little popups for all of my client-side validation messages.

I've created a JSFiddle example here explaining what I want and am coming from: https://jsfiddle.net/4nftdufu/

The behavior I want to see is shown by the first form (Foo).

<form class="form-inline"> <div class="form-group"> <input type="text" class="form-control" id="inputFoo" placeholder="Type Foo Here" required> </div> <button type="submit" class="btn btn-primary">Submit Foo</button> </form> 

The second form (Bar) is essentially where I'm coming from. Note that I'm hooking into some Bootstrap validation behavior here (I found that CSS online somewhere in a blog post or some other SO question). Ultimately, this is not the behavior I want and I've not spent any time cleaning up this imperfect integration.

<form class="form-inline"> <div class="form-group"> <input class="form-control input-validation-error" data-val="true" data-val-required="Required" id="inputBar" name="inputBar" placeholder="Enter Bar here" type="text" value="" aria-required="true" aria-describedby="Bar-error" aria-invalid="true"> <p class="help-block"><span class="field-validation-valid" data-valmsg-for="inputBar" data-valmsg-replace="true"></span></p> </div> <button type="submit" class="btn btn-primary">Submit Bar</button> </form> 

How can I get my Data Annotations + jQuery Unobtrusive-driven validations to hook into these HTML popups for all validation messages when in a supported browser?

Answer 1

MVC's client side validation using the jquery.validate.js and jquery.validate.unobtrusive.js files and HTML-5 validation do not play well together. The jquery.validate.js file in fact adds the novalidate attribute to your <form> element to disable HTML-5 validation using the following code

// Add novalidate tag if HTML5. this.attr( "novalidate", "novalidate" ); 

If you want your messages to look like the browsers callouts, then you can always use css to style the element generated by @Html.ValidationMessageFor(). When a form control is invalid, a class="field-validation-error" is added to the element which can be used for styling (adding color, borders, using the ::after pseudo selector to add arrows etc)