0

What I am trying to do is to fade in validation summary slowly when errors found. I am using ASP.NET MVC 4 with unobtrusive jQuery validation.

Validation works well. When issues are found css class of the summary div switches from validation-summary-valid to validation-summary-errors.

I don't want to hook into validation events, because I want to keep validation logic and look and feel separated. So my goal is to to detect that css class switch over and trigger some animation (fadeIn for instance). In this case the script responsible for animation will not be aware of validation, just of css classes.

George Mamaladze
  • 7,593
  • 2
  • 36
  • 52
  • 1
    The only cross-browser way would be a very bad way to handle it. setInterval. If you want to keep the two separate, create an object of some sort that both elements of your application interface with. When the validation occurs, trigger a handler in the common object that will then control what your look and feel does. Or, you can trigger a global event from inside your validation and control it with that. – Kevin B Jul 18 '12 at 21:06
  • 1
    There are [css transition effects](http://caniuse.com/#search=transition), which would do what you want, but they're still in "Working Draft" and aren't available in IE9 and below, so it would depend on your target audience if you could use them – MrOBrian Jul 18 '12 at 21:09
  • Thanks @KevinB. I see - what you recommend is a compromise which couples validation and visualization loosely. – George Mamaladze Jul 18 '12 at 21:10
  • Either way, your validation script needs to inform your look and feel that it needs to do something. Whether it is done directly or through another object, it has to happen. – Kevin B Jul 18 '12 at 21:11

1 Answers1

0

You could try using PubSub.

Set up your form to fire an invalid event when something fails validation and have your validation summary subscribe to that event and make any necessary changes.

PubSub is made easy with jQuery. Just use the trigger() method.

Jason
  • 51,583
  • 38
  • 133
  • 185