The problem is that I apply it too all my fields in the form (regardless of whether they are required or not). This causes a few issues as it makes things that arn't require behave as if they are required.

I ended up changing mine to:

$.validator.addMethod("pageRequired", function (value, element) {
            var $element = $(element);
            var $form = $(element.form);
            var current = $form.data('wm').currentScreenIndex;
 
            var indexOfElement = $(element).parents('.-w-wizard-screen').data('screen-index');
 
            if ($element.is(':visible')) {
                var rules = $element.rules();
                if (rules.required) {
                    var result = $.validator.methods.required.call(this, element.value.replace(/\r/g, ""), element, rules.required);
                    if (result == true)
                        return !this.optional(element);
                }
 
                return true;
            }
 
            return 'dependency-mismatch';
        }, $.validator.messages.required);

Second issue I had was with the order the rules were checked. If a field was required and failed the required validation then it would not continue on and run my page required validation method. To work around this I had to change the check method so it would run all the rules on the method, in the event of a failure (with no dependency-mismatch) it would just show the first error it encounted.

checkOverride: function (element) {
        element = this.clean(element);
 
        // if radio/checkbox, validate first element in group instead
        if (this.checkable(element)) {
            element = this.findByName(element.name)[0];
        }
 
        var rules = $(element).rules();
        var dependencyMismatch = false;
        var failures = [];
        for (method in rules) {
            var rule = { method: method, parameters: rules[method] };
            try {
                var result = $.validator.methods[method].call(this, element.value.replace(/\r/g, ""), element, rule.parameters);
 
                // if a method indicates that the field is optional and therefore valid,
                // don't mark it as valid when there are no other rules
                if (result == "dependency-mismatch") {
                    dependencyMismatch = true;
                    continue;
                }
                dependencyMismatch = false;
 
                if (result == "pending") {
                    this.toHide = this.toHide.not(this.errorsFor(element));
                    return;
                }
 
                if (!result) {
                    failures.push({ element: element, rule: rule });
                    //this.formatAndAdd(element, rule);
                    //return false;
                }
            } catch (e) {
                this.settings.debug && window.console && console.log("exception occured when checking element " + element.id
 + ", check the '" + rule.method + "' method", e);
                throw e;
            }
        }
 
        if (dependencyMismatch)
            return;
        if (failures.length) {
            this.formatAndAdd(failures[0].element, failures[0].rule);
            return false;
        }
        if (this.objectLength(rules))
            this.successList.push(element);
        return true;
    }


















































I am not sure if doing this will break anything. So far so good. I may be abusing the intended meaning of dependency-mismatch.