jQuery Validation form valid event

I was using the jQuery Validation plugin in a project, but I couldn’t find a proper option that I could use to find out if the form indeed was completely valid. We wanted to show a message like “You’re almost done, just hit signup now and you can start right away!” when all fields in the form were valid. I guess it’s the call to action stuff that marketing guys really like.

Using a $(form).valid() inside the unhighlight would cause a too much recursion error, which actually makes sense. The form itself doesn’t seem to have an invalid state either, when I checked with firebug.

So in the end, all I could think of, was counting the number of valid inputs, and see if they were all valid. I must see, I only used input text and selectboxes. Beware that also hidden inputs will be counter if you use the input selector.

I left out all the other code, so, this is the piece of code that really matters.

You could also do it the opposite way, and count the error elements. I actually did this too, because another comforting text was required when the e-mail input was hit: don’t worry, we won’t sell your data! This actually seemed a bit harder because there were input field that didn’t have a error message. But, surprise surprise, the error element was placed anyways, it just didn’t contain any text.

Also, when you unhighlight, the element doesn’t go away, it just becomes invisible.

But well, if you want to fool around with it, this is the selector I came up with. Note that my error messages go into a feedback container, but I suppose you could just search on the class name as well.

It’s actually the :parent and :visible that does the trick. I wasn’t sure if I could combine them, but it seems to work. According to the jQuery document, :parent is the inverse of :empty.

So you could use this if you only want to show a messages when no more (visible) errors are there anymore, for example if you use the same space. This is a bit different than count the valid options, because if you have invalid options that don’t have an error message, and therefore don’t use space, it still may be nice to show some message.

Leave a Reply

Your email address will not be published. Required fields are marked *