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.

Please use the proper tags. This is not just a jQuery Validate problem if you also depend on the Unobtrusive Validation plugin as part of your ASP framework. Edited tags. — Sparky, Sep 07 '18 at 14:52
Why are you removing the ASP tags? Don't you want help from the people most likely to be able to help you? — Sparky, Sep 07 '18 at 19:57
You need to also show us the code for you custom `ValidationAttribute`, and how you are applying to to your model properties — , Sep 07 '18 at 22:36
Why do you need that. I need only the solution on the client: so only on jquery. The server side is not important. — Dan, Sep 08 '18 at 09:18
@Sparky I removed them because the solution I require has nothing to do with the asp.net. I only need a javascript code. The server can be what ever I choose. My problem is on the client side. If this is not possible than provide this as answer and I will accept it if you insist that the jquery-validation-unobtrusive depends on the asp.net code — Dan, Sep 08 '18 at 09:23
The ASP framework constructs the data attributes, which are used by the client-side validation. The Unobtrusive Validation plugin is exclusive to the ASP framework. When using the ASP framework with Unobtrusive Validation, jQuery Validate can only be initialized via the Unobtrusive Validation plugin. Most importantly, yours might be one of the few, if not only, questions on SO tagged with Unobtrusive Validation and not the framework that dictates its operation. If you want good help, tag the question properly so the people who know the most about these things can actually see it. — Sparky, Sep 08 '18 at 15:01
Also, the ASP dictates the HTML markup, which is use by the client-side JavaScript, so any mistakes in your ASP could affect your jQuery. I'm the only SO user with a gold badge for the jQuery Validate tag, but I know very little about ASP and its Unobtrusive Validation plugin. On the other hand, @StephenMuecke is not somebody you should ignore with these issues; he's more likely to help you with ASP/Unobtrusive, so you might want to pay attention to what he requests, and not be so dismissive of his comments. — Sparky, Sep 08 '18 at 15:13
@ Sparky If you would have asked if the function works without the code for validating the other field it would have been better than assume that the problem might be in the ASP. Since I remove them then I can assure you that the html tag contains the correct configuration and the validation works as expected. However I though that if a user enters an invalid min and tries to press submit he sees that also the max is invalid. So I wanted to invalidate both of the fields. So this is the reason that I need a jquery/javascript solution because the server has nothing to do with this request. — Dan, Sep 10 '18 at 05:39
And since you asked so nicely here is the html tag the other one is exactly the same just that is uses greatethan — Dan, Sep 10 '18 at 05:39

Dan · Accepted Answer · 2018-09-10T08:35:17.320

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]

After further investigation it seems that this is not the correct solution. Calling validator.element resets some internal values and if you have other rules they are going to be ignored. The groups functionality has to be investigated. — Dan, Sep 10 '18 at 06:59

Validate a field inside a validation function

1 Answers1

Linked