1

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:

Standard form field

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

Form field with help text shown

And when validation occurs, the following happens:

Form field with validation shown

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?

Spikeh
  • 3,540
  • 4
  • 24
  • 49
  • FYI - I found this link (and replaced submitHandler with invalidHandler), but it doesn't seem to fire? http://stackoverflow.com/questions/4747017/how-to-add-a-handlesubmit-function-when-using-jquery-unobtrusive-validation – Spikeh Feb 11 '12 at 18:59

2 Answers2

2

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 :)

Community
  • 1
  • 1
Spikeh
  • 3,540
  • 4
  • 24
  • 49
1

Hiding the description doesn't seem very logical when people have made a mistake, because there is no more help on what they should do..

You can specify the location of the error labels, you could for example put the error label next to the title of the input field and place a dash in between.. That way you keep the description and it won't overlap.

Richard
  • 4,341
  • 5
  • 35
  • 55
  • Right you are - and as my answer states, it's only created more problems anyway! I'll have to take a look at how I'm outputting the validation errors. Unfortunately I can't put the validation message near the display text, as some of the fields have fairly long descriptions. I might have to bite the bullet and put them underneath :| It's only a little CSS change at the end of the day. – Spikeh Feb 11 '12 at 19:09
  • is it just the 'normal' jQuery validate plugin? Have a look at 'errorPlacement' here http://docs.jquery.com/Plugins/Validation/validate – Richard Feb 11 '12 at 19:13
  • Either way make sure the input field's style changes when there is an error. The class "error" should be appended to the element, so give it e.g. a red border – Richard Feb 11 '12 at 19:15
  • Yeah, just the standard jquery validator. Thanks for that - I'll take a look at the link. The 'error' class doesn't seem to be appended when an error occurs, though? – Spikeh Feb 11 '12 at 19:19
  • OK, input-validation-error is appended, but not to all elements. I'm using JQuery UI autocomplete on one field, and it doesn't seem to be changing from valid to input-validation-error. – Spikeh Feb 11 '12 at 19:24
  • Not to all elements? Do you mean not to all elements that cause an error? That's odd... Are you sure? And are you sure the validation is set-up properly then? – Richard Feb 11 '12 at 19:31
  • Well, all other fields work fine (I've added a red border around them). The field validates fine, the error message is displayed, but the class isn't applied. The output HTML is as follows (it uses the autocomplete JQuery UI plugin): – Spikeh Feb 11 '12 at 19:37
  • 1
    Aha! Ignore me... I knew there was something funny going on. The textbox is not bound to the model - a hidden field is. The autocomplete box updates the hidden field :) – Spikeh Feb 11 '12 at 20:10