You are viewing limited content. For full access, please sign in.

Question

Question

Comparing Two Fields using Javascript - After lookups on said fields

asked on October 24, 2022

Hi folks,

 

I'm attempting to check if a user's Approval Limit is NOT above the value of the invoice being processed.

The aim is that, if like in the image above the limit is lower than the invoice value it'll warn and say that it needs to go to someone with a higher limit.

 

For this I've taken some Javascript from another thread (perhaps where I've gone wrong) and rewritten it to try and suit my purposes:

(CSS classes iValue and aLimit are added to the appropriate fields)

$(document).change(function ()  
                              { 
// custom validator for name confirmation
window.Parsley.addValidator('samevalue', 
                                {
  validateString: function(value, requirement, field) 
                                  {
    var iValue = $('.IValue input').val();
    var aLimit = $('.ALimit input').val();
    
    return (iValue <= aLimit || iValue == '' || aLimit == '');
                                   },
  messages: 
                                    {
    en: 'Approver Limit Cannot Be Smaller Than The Invoice Value!.',
                                     }
                                  });
// assign validator to name fields
$('.IValue input, .ALimit input').attr('data-parsley-samevalue','');
                                });

The original thread was here btw.

 

I should explain the issue I'm having in greater detail.
Firstly I'm using lookups (stored procedures) to populate the 'Approver Name' and 'Approval Limit' fields so that only the correct people for that 'Team' appear. (Team is basically the approval tier £1000-£15000)
This means that the validation doesn't actually proc unless you manually go and type in the limit or retype the 'Gross Value' (which is also a lookup).
My aim is for as little manual intervention as possible so I'm hoping to not have to have the users mess with either of the fields being compared by the code.


Also another strange issue I've notices is if the 'Gross Value' is 9999 (which it is in one of my example invoices) then only an 'Approval Limit' starting with 9999 will validate which confuses me greatly...

Apologies for the house of cards and hot mess but any advice would be greatly appreciated

0 0

Answer

SELECTED ANSWER
replied on October 25, 2022

If 7 > 51 of 9999 > 15000 is evaluating as true, that's a big flag that it is comparing the values as strings instead of numbers.  It's basically saying that alphabetically, 7 comes after 5 and 9 comes after 1 - both true, but not helpful in this situation.

Try converting your values to numbers, like this with the parseFloat function: 

    var iValue = parseFloat($('.IValue input').val());
    var aLimit = parseFloat($('.ALimit input').val());

 

Another note, I think you should probably use a document ready codeblock instead of document change, so that it runs on the form load, but not every time a change happens on the form.

Regarding it not doing the validation when the lookup is complete, we can trigger it to run some code when the lookup is complete (document onloadlookupfinished block and a document lookupcomplete block).  The following code will trigger every time that the lookups complete (we can make it more specific by referencing the event value, but running it on the completion of any lookups may work for your purposes).  Within those code blocks, we'll run the validation on the specific fields.  In order for that to work, when you are adding the validation element to the fields we also need to add a validation group (like this: attr('data-parsley-group','IValueAndALimit')), so that we can call that specific group late on.  Put it all together and it should look something like this: 

$(document).ready(function () { 

  // custom validator for name confirmation
  window.Parsley.addValidator('samevalue', 
  {
    validateString: function(value, requirement, field) 
    {
      var iValue = parseFloat($('.IValue input').val());
      var aLimit = parseFloat($('.ALimit input').val());
    
      return (iValue <= aLimit || iValue == '' || aLimit == '');
    },
    messages: 
    {
      en: 'Approver Limit Cannot Be Smaller Than The Invoice Value!.',
    }
  });
  // assign validator to name fields
  $('.IValue input, .ALimit input').attr('data-parsley-samevalue','').attr('data-parsley-group','IValueAndALimit');
});

$(document).on("onloadlookupfinished", function (event) {
  $('#form1').parsley().validate('IValueAndALimit');
});

$(document).on("lookupcomplete", function (event) {
  $('#form1').parsley().validate('IValueAndALimit');
});

 

0 0

Replies

replied on October 25, 2022 Show version history

To Simplify this, the way I manage these scenarios is I would create a Hidden field with the calculation for the values condition =IF(GrossValue>MaxValue,"Yes","No")

Then I would just use a Field Rule to display some HTML text on the page with the Message,

IF MaMessage = Yes

      SHOW HTML Field

or use JS to check the value of this Hidden field when it changes (Formula Updates) and if Yes, then popup the message.

$(.MaxMessage).change(function(){

if $('.MaxMessage input').val() = "Yes" {

alert or whatever message dialog you want

}

});

2 0
replied on October 26, 2022

Hi Steve,

 

Thanks for the reply, I think I might try this approach in my next encounter as I like it's elegance. 

I think that I probably should have started with something like this and built it up.

1 0
replied on October 24, 2022

How about setting the max value of the gross to be the limit value.  Something like...

    $('#q29 input').prop("max", maxMeals).change();
 

0 0
replied on October 25, 2022

Hi James, that could work for the final team (£15000), although it may not be ideal as values up to £40000 can be put through (they need a second approval stage).
I'll play around with it, but I think I may have discovered a greater flaw with my comparison as I've removed the lookups so I can just test the raw values and the Javascript.

It now leads to this absurd situation:

Where because 7 is bigger than the 5 at the start of 51 it's fine.
However just 5 won't cut it. I think I might need to totally start from scratch.

0 0
SELECTED ANSWER
replied on October 25, 2022

If 7 > 51 of 9999 > 15000 is evaluating as true, that's a big flag that it is comparing the values as strings instead of numbers.  It's basically saying that alphabetically, 7 comes after 5 and 9 comes after 1 - both true, but not helpful in this situation.

Try converting your values to numbers, like this with the parseFloat function: 

    var iValue = parseFloat($('.IValue input').val());
    var aLimit = parseFloat($('.ALimit input').val());

 

Another note, I think you should probably use a document ready codeblock instead of document change, so that it runs on the form load, but not every time a change happens on the form.

Regarding it not doing the validation when the lookup is complete, we can trigger it to run some code when the lookup is complete (document onloadlookupfinished block and a document lookupcomplete block).  The following code will trigger every time that the lookups complete (we can make it more specific by referencing the event value, but running it on the completion of any lookups may work for your purposes).  Within those code blocks, we'll run the validation on the specific fields.  In order for that to work, when you are adding the validation element to the fields we also need to add a validation group (like this: attr('data-parsley-group','IValueAndALimit')), so that we can call that specific group late on.  Put it all together and it should look something like this: 

$(document).ready(function () { 

  // custom validator for name confirmation
  window.Parsley.addValidator('samevalue', 
  {
    validateString: function(value, requirement, field) 
    {
      var iValue = parseFloat($('.IValue input').val());
      var aLimit = parseFloat($('.ALimit input').val());
    
      return (iValue <= aLimit || iValue == '' || aLimit == '');
    },
    messages: 
    {
      en: 'Approver Limit Cannot Be Smaller Than The Invoice Value!.',
    }
  });
  // assign validator to name fields
  $('.IValue input, .ALimit input').attr('data-parsley-samevalue','').attr('data-parsley-group','IValueAndALimit');
});

$(document).on("onloadlookupfinished", function (event) {
  $('#form1').parsley().validate('IValueAndALimit');
});

$(document).on("lookupcomplete", function (event) {
  $('#form1').parsley().validate('IValueAndALimit');
});

 

0 0
replied on October 26, 2022

Hi Matthew,

These edits you've made are wonderful. The main problem I was having was it was a string and I think the original code had been comparing text to see if it was the same so making it an INT was the way forward.

The other edits make sure the field is validated before, during and after the lookup which is certainly an improvement.

I'm going to mark this as the solution as it's now performing exactly as I wanted it to!

1 0
replied on October 26, 2022

So happy to hear it worked for you.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.