ASP.NET LinkButton / ImageButton and JQuery Validate?

Question

We are introducing JQuery to an existing ASP.NET application and use the Validate plugin for JQuery to do the client side validation (we do not want to use the asp.net validators).

Everything works nicely with the asp:Button control. The client side validation is triggered before the page is submitted.

However when using the LinkButton and ImageButton controls the page gets submitted without validating the form first.

This is due to the fact that validate works with Buttons that are rendered as Input type="submit" while the ImageButton renders as Input type="image".

Anyone else experienced this?

Thanks a lot for ideas and infos how to resolve.

Update:

Thanks a lot, your answers helped to identify the problem. it turns out that there was a bug in the validate plugin for JQuery. We used a patch to avoid the validation of hidden input fields, which uses parents().filter(":hidden"). This doesn't work properly in JQuery 1.3.2. We replaced it with .is(":visible"). Now the asp.net ImageButton works by default!

Update2:

The LinkButton still did not work. The simple solution is to add a click function that returns false if the form is not valid:

$("#<%= tb.ClientID %>").click(function() {
            return $('form').valid();
        })

Answer 1

Not sure if this will help, but give it a shot...

http://docs.jquery.com/Plugins/Validation/validate#options

$("input[type=image]").click(function() {
   $($(this).parents(form)).validate();
});

You might need to replace the "form" with something more specific, but I tried to get it as accurate as possible without knowing how everything's laid out on your page. Reply if this helps!

Answer 2

The first suggestion might still work because you can cause the postback to fire using Javascript after the validation occurs.

The javascript is:

__doPostBack('<%= YourImageControl.UniqueID %>','');

The second empty parameter can be used to pass arguments.