[jQuery] [validate] Validation plugin: class="cancel" requires double click to post.

[ovalsquare]

I have a form with multiple fields that I'm validating (some with methods
added for custom validation) with Jörn Zaeffere's excellent jQuery
Validation plugin. How do you circumvent validation with specified submit
controls (in other words, fire validation with some submit inputs, but do
not fire validation with others)? I have added the class "cancel" to the
required submit input, but this control now requires a double-click to
submit?!? (verified in Firefox 3 and IE7)

<input type="submit" name="ctl00$C$Proceed" value="Proceed"
id="ctl00_C_Proceed" class="button cancel" />

My situation:

It's with ASP.NET WebForms, but you can ignore that if you wish. However, I
am using the validation more as a "recommendation": in other words, when the
form is submitted, validation fires but instead of a "required" message
displaying, a "recommendation" shows that says something along the line of
"you missed the following fields.... do you wish to proceed anyways?" At
that point in the error container there's another submit button now visible
that can be pressed which would ignore the validation and submit anyways.
How to circumvent the forms .validate() for this button control and still
post?

The Buy and Sell a House sample at
http://jquery.bassistance.de/validate/demo/multipart/ allows for this in
order to hit the previous links, but it does so through creating custom
methods and adding it to the validator. I would prefer to not have to create
custom methods duplicating functionality already in the validation plugin.

The following is a shortened version of the immediately applicable script
that I've got right now:
    <script type="text/javascript">
        //<![CDATA[
        $(document).ready(function() {

// Snip...

        var container = $("#<%= Form.ClientID %> div.validationSuggestion");

        $('#<%= Form.ClientID %>').validate({          
            errorContainer: container,
            errorLabelContainer: $("ul",container),
            rules: {
                 <%= YesNo.UniqueID %>: { required: true },
                 <%= ShortText.UniqueID %>: { required: true } // etc.

            },
            messages: {
                 <%= YesNo.UniqueID %>: 'A message.',
                 <%= ShortText.UniqueID %>: 'Another message.' // etc.
            },
            highlight: function(element, errorClass) {
             $(element).addClass(errorClass);
             $(element.form).find("label[for=" + element.id +
"]").addClass(errorClass);
             $(element.form).find("label[for=" + element.id +
"]").removeClass("valid");
            },
            unhighlight: function(element, errorClass) {
             $(element).removeClass(errorClass);
             $(element.form).find("label[for=" + element.id +
"]").removeClass(errorClass);
             $(element.form).find("label[for=" + element.id +
"]").addClass("valid");
            },
            wrapper: 'li'
        });
});
//]]>
</script>


It appears that it doesn't matter whether the proceed button is in the
validationSuggestion div or not (whether visible before or after).

I added:

        $('#<%= Proceed.ClientID %>').click(function(){
            alert('testing');
        });

And it appears the first click fires this alert, and then only on the second
click does it actually submit the form.

Much thanks in advance for helpful pointers.

-- 
View this message in context: 
http://www.nabble.com/-validate--Validation-plugin%3A-class%3D%22cancel%22-requires-double-click-to-post.-tp19999299s27240p19999299.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.