How to suppress jquery validate on cancel?

Question

I'm using the jquery validate plugin for form validation. I'm seeing something weird with the cancel functionality. I have a form with one email field, a submit button, and a cancel button. When I type an incomplete address in the email field, and then, without clicking anywhere else on the page, click cancel, the validator checks the email field, displays the invalid message next to the field, and kills the cancel action.

I found a related question here: jQuery Validation plugin: disable validation for specified submit buttons. It looks exactly like what I need. However it doesn't work! I added the "cancel" css class to my cancel button, but it had NO effect.

This sample code demonstrates the problem I'm seeing. I'm seeing the behavior in both FF and Chrome.

In this sample, when I type an invalid email address in the text input, and then click the cancel button before clicking anything else, the validator displays a message next to the text input and the cancel action never occurs. If I then click cancel again, the page reloads as expected. This means that to get the page to cancel, I effectively have to click cancel twice.

<script type="text/javascript">
    $(document).ready(function () {
        $("#myForm").validate()

        $(".cancel").click(function () {
            location.reload(true)
        })

    })
</script>

<div>
    <form name="myForm" id="myForm" action="index.html">
        <input type="text" class="required email" id="myField" name="myField"/>
        <input type="submit" value="Submit"/>
        <input type="submit" value="Cancel" class="cancel"/>
    </form>
</div>

Also interesting: I tried running the demo found in the jquery validate documentation (http://docs.jquery.com/Plugins/Validation/Reference#Skipping_validation_on_submit). When I run the demo, I can't tell if validation is working--the email field is never marked invalid, even when I enter gobbledygook and click the submit button. All I ever get is a simple alert that's been added to the form's submitHandler. And the cancel button behaves the same way, so I can't tell if adding the cancel class works at all.

I'm running this with both FF and Chrome. I'm using jquery 1.9.1 and jquery-validate 1.11.4.

Solution

As per the accepted answer on the question you reference, adding a cancel class only "suppresses" the validation. As you can see in this demo, the cancel button behaves exactly like another submit button, except that the validation is bypassed. Please describe exactly what you want to see happen when the cancel button is clicked.

Otherwise, maybe this is what you want: http://jsfiddle.net/25XBT/

jQuery:

$(document).ready(function () {

    var validate = $('#myform').validate({
        // your rules & options
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

HTML:

<form id="myform">
    <input type="text" name="myfield" />
    <input type="submit" />
    <input type="submit" id="cancel" class="cancel" value="cancel" />
</form>

See: http://docs.jquery.com/Plugins/Validation/Validator/resetForm

EDIT: class="cancel" has since been deprecated in favor of the formnovalidate attribute.

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />

Comments

[schufty]

I only see one major difference between your fiddle and my sample: you include e.preventDefault() in your click handler. However, when I run my sample, it's not even getting to the click handler on the first click. So I looked for other differences, and it turns out the key difference between your code and mine is the hard break you inserted between the submit and cancel buttons in your fiddle (for some reason you didn't include it in your answer). When I include the hard break in my code, it works! When I take it out, it's broken again. I can't imagine why that would matter.

[schufty]

I've updated your fiddle to show what happens when the hard break is removed. The updated fiddle is here: jsfiddle.net/47XV9. Note you get the exact behavior I described in my original question.

[Sparky]

@schufty, I left the <br/> out of my answer because it should be totally irrelevant & superfluous to the functioning of this JavaScript. Also, I notice the jsFiddle I linked to in my answer was not the correct jsFiddle that I intended to link to. I've fixed my link now.