JQuery Validate - class=“cancel” submit button only stops validation once

Question

I have a form with buttons I do not what to Submit the form, but they are (necessarily) submit buttons. I\'ve given them the class \"cancel\" and on the first click they are can

Answer 1

Why not just have a cancel function?

Change your button to be something like

 <input type="button" class="btncat_deselected cancel"  id="Pet3btncat" value="Cancel" />

And then add a listener to it with jQuery

$(function() {
     $("#Pet3btncat").live('click',function() {
            $('#myform.input').html('');
     });
});

Answer 2

Ok, using what DA commented; I ended up telling the form to NOT validate on submit ( onSubmit: false, ) and then created a function to hide the actual submit button, and have an image (or could of been a normal button) to submit the form on validation being true:

$(function() {

        $('#Petform #btnNext').hide();
        $('#Petform #NextWrapper').append('<img src="../images/next.gif" alt="submit this form" style="cursor:pointer;" />')
        $('#Petform #NextWrapper img').live('click', function() { 
                  if( $('form').valid() ) {
                        $('#btnNext').click();
                  } 
            });

      });

This way the form wont be sent to server if it isnt valid, and normal form buttons/functionality reverts if JS is disabled.

Thanks for the replies, Guys.