Question

I’m using an awesome plugin to validate my form on the front-end: http://docs.jquery.com/Plugins/Validation . The problem is the form has two buttons (back and submit). I can bypass the back button from validating the form using the css class cancel, thanks to the plugin; but the other js still fires (the animated gif, disable the submit button, and the change of opacity to the submit). DARN.

I tried wrapping the entire thing in a click function for submitbtn, so that back button wouldn’t have anything to do with it, that didn’t work. I also tried putting just the back button in a click function that would reverse style effects, that didn’t work.

I seek the advice of a smarter man, or woman, thanks!

$(".simple_form").validate({
    submitHandler: function(form) {
        $(".submitbtn").addClass("opacitychangeonsubmit"); // change submit button opacity
        $(".submitbtn").attr("disabled", true);// disable the submit btn
        $('#loading_image').show(); // show animated gif
        form.submit();
    }
})

Answer 1

I went a different route, which is somewhat ugly and hackish, although working just fine.

$(".simple_form").validate({
    submitHandler: function(form) {

        if ((form.elements.item(10).value) == "Back") {
            form.submit();
        } else {
            $(".submitbtn").addClass("opacitychangeonsubmit"); // change submit button opacity
            $(".submitbtn").attr("disabled", true);// disable the submit btn
            $('#loading_image').show(); // show animated gif
            form.submit();
        }
    }
});