jquery - Validate a field inside a validation function

Question

This is related to this question: Validation for selecting a minimum and maximum

So I have two fields one for minim and one for maxim that the user must enter. I need to have a validation on both field that they are correct minim < maxim.

I have the following code

$.validator.addMethod('lessthan', function (value, element, params) {
  var greatElement, validator, less, greatText, isEqualValid, great;

  greatElement = $(params[0]);
  // This code does not work
  //validator = $( greatElement[0].form ).validate();
  //validator.element(greatElement);

  // This code does not work
  greatElement.valid();

  // validate the current value 
  // missing for brevety  
});

$.validator.unobtrusive.adapters.add('lessthan', ['compareto', 'isequalvalid'], function (options) {
  var element = $(options.form).find('input[name=' + options.params['compareto'] + ']')[0];
  options.rules['lessthan'] = [element, options.params['isequalvalid']];
  options.messages['lessthan'] = options.message;
});

However when I am trying to validate the other field for the current field even though the aria-invalid is not true the input-validation-error class is not removed.

How can I trigger the validation for the other field inside the validation function?

UPDATE I should mention that the case I need to fix is when validation is executed when I change one of the fields (keyup or lostfocus).

Example: I have min 2 and max 5. I change the min to 23 both fields become invalid and have the error class associated with them I change the min to 3 only the max field becomes valid. The min field remain invalid even though the validation function returns that is valid.

Answer 1

After further investigation I found my problem. It seems that when you call validator.element function internally it sets a property currentElements. So basically you are changing the current element that is being validated.

So in order so solve my problem I am setting the currentElements back to the element being validated

$.validator.addMethod('lessthan', function (value, element, params) {
  var greatElement, validator, less, greatText, isEqualValid, great;

  greatElement = $(params[0]);
  validator = $( greatElement[0].form ).validate();
  validator.element(greatElement);
  // THIS IS THE LINE ADDED
  validator.currentElements = $(element);

  // validate the current value 
  // missing for brevety  
});

$.validator.unobtrusive.adapters.add('lessthan', ['compareto', 'isequalvalid'], function (options) {
  var element = $(options.form).find('input[name=' + options.params['compareto'] + ']')[0];
  options.rules['lessthan'] = [element, options.params['isequalvalid']];
  options.messages['lessthan'] = options.message;
});

You can of course get the previous currentElements before calling the validator.element and setting it back after the call.

There might be an alternative with groups but seems that groups are not supported with html5 tags so it might be trickier to implement.

UPDATE with correct solution

Since I am not using form.validate(settings) and the groups is not supported with the html5 tags I had to implement an alternative solution:

$(document).ready(function () {
  $('[data-val-lessthan-groupname]').each(function () {
     var validator = $(this.form).validate();
     validator.groups[this.name] = $(this).data('val-lessthan-groupname');
     validator.invalid[this.name] = true;
  });
});

So basically I am setting a group name for the min and max. In the document ready I am getting the validator and set for the form element the group name. Also I am setting that the element is valid, otherwise the validation would only be executed after the element is "validated" (set focus in the control and lose focus on it or submit) [It seems that the group was developed only with required_from_groups in mind so it validates the other fields if they have a changed value]