Question

I’m writing an MVC3 site, and I’m using JQuery unobtrusive validation to validate my forms. I’ve built a form framework within the app which shows a neat little “help” popup whenever I click on a form field. Everything works in that area, and I’m happy with it.

The issue is that I don’t have very much real estate available for the form field validation messages that are displayed besides each form, and if I put them underneath the form fields, the resizing is ugly. Here’s what a typical form field looks like:

When I click on the field, the following is shown:

And when validation occurs, the following happens:

My solution is to simply hide the help text when validation occurs (I use a shared function to do so, let’s call it “hideDescriptions()”). Every form in the site uses the same framework, so I want to be able to call hideDescriptions() whenever the unobtrusive validation occurs, at any point.

My javascript is split in to a number of files, for example:

/Review/Create/ – uses createReview.js
/Review/Read/ – uses readReview.js

They both also include “shared.js”. I was hoping to be able to extend the jquery unobtrusive validation plugin in the shared.js file, and apply it to every form in the site in one go… but I’m a bit lost. This is as far as I’ve gotten:

$("form").validate({
    invalidHandler: function (form, validator) {
        hideDescriptions();
    }
});

But I’m more than aware that won’t work. I assume that the unobtrusive validator attaches the validator to all forms by default, seeing as though I don’t need to attach it myself?

Is there a way I can extend the unobtrusive validation to perform a generic callback if the form is not valid?

Answer 1

After spending 20 minutes writing that, I found this link, which pretty much solves my problem. Here’s the code I used:

$("form").bind("invalid-form.validate", function () {
    hideDescriptions();
});

However, it’s almost useless as whenever the user clicks in the field again, the description is shown!

Richard has also raised a valid point – I will re-evaluate the way my forms work 🙂