Validate 1 field (unobtrusive) when other field changes, and check only 1 rule

Question

Is there any way to trigger a specific jquery-unobtrusive rule on one field, when the value in another field changes? I have a form with two date fields (say start/end) on it, with validation that `end` must be greater than `start`. This works fine in the simple case of changing `end` after `start` is already set. What it doesn't do is allow for is: - setting `end` first and then setting `start` - changing `start` after both have already been set, and violating the constraint Server side validation will catch it of course, but it looks bad to have the error on `end` stay set even after you have fixed `start`, or no error showing up when the value in `end` is changed to an invalid value. The reason to trigger a specific rule is that I don't want to fire off the `required` or `date` format rules on the same field before the user has had a chance to enter a value. The form starts off 'clean'. However, if that isn't possible then firing all the rules is ok. Sorry for no code samples, but…

Accepted Answer

This might work for you...

```
$('form').data('validator').element('#Key')
```

This grabs the validator off of your form, and forces validation on an individual item.

http://docs.jquery.com/Plugins/Validation/Validator/element#element

UPDATE

See if this continues to help!

```
$.extend($.validator.prototype, {
        elementWithRule: function(element, rule) {
            element = this.clean(element);
            this.lastElement = element;
            this.prepareElement(element);
            this.currentElements = $(element);
            var result = this.checkSpecificRule(element, rule);
            if (result) {
                delete this.invalid[element.name];
            } else {
                this.invalid[element.name] = true;
            }
            if (!this.numberOfInvalids()) {
                // Hide error containers on last error
                this.toHide = this.toHide.add(this.containers);
            }
            this.showErrors();
            return result;
        },
        checkSpecificRule: function(element, rule) {
            element = this.clean(element);

// if radio/checkbox, validate first element in group instead
            if (this.checkable(element)) {
                element = this.findByName(element.name).not(this.settings.ignore)[0];
            }

var findRule = { },
                checkRule = $(element).rules()[ rule ];
            var rules;

if (checkRule) {
                findRule[rule] = checkRule;
                rules = findRule;
            }

if (!rules) {
                return;                
            }
            var dependencyMismatch = false;
            for (var 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) {
                        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 (this.objectLength(rules))
                this.successList.push(element);
            return true;
        }
    });

// Then use it like this...
$('form').data('validator').elementWithRule('#Key', 'required');
```

There didn't appear to be any built in way to do this, so I just hacked something together! :)

Validate 1 field (unobtrusive) when other field changes, and check only 1 rule

Solution

Problem