JQuery Validate - class="cancel" submit button only stops validation once.

Question

Hi. 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 cancelling submission. the desired effect. However, any subsequent click is then back to normal; Submitting the form. Which I don't want.

Now, I do have some post-backs happening on click of these buttons. I tried running the $('form').validate({...}); function on pageLoad instead of document.ready, but this just stopped the validation working at all.

the HTML for one of the buttons is:

<input type="submit" class="btncat_deselected cancel" 
id="Pet3btncat" value="" name="Pet3btncat" />

Any Ideas would be most helpful. Thanks.

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.