CODEWITHSUNDEEP
jqueryjquery-validate
schufty
schufty

Reputation: 141

How to suppress jquery validate on cancel?

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.

Upvotes: 3

Views: 12658

Answers (1)

Sparky
Sparky

Reputation: 98758

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" />

Upvotes: 9

Related Questions