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

Question

Question

Forms Comparing Numeric Fields

asked on September 10, 2017

Hi there,

I have a form with some numeric fields to take vehicle weight inputs from end-users.

I'd like to compare a total of the TARE + Product Weight fields and if greater than the GVM field, then display some sort of validation error (similar to when a required field is left empty or display some Custom HTML ), to end-users.

TARE + Product Weight should not exceed the GVM.

I've configured the TARE and PW Total field to sum the TARE and Product Weight fields using the "Advanced > Calculation".

I think I am going to need to utilise JavaScript to achieve what I require, however, I'm a complete novice when it comes to JavaScript and would really appreciate any help with this!

 

 

Thanks in advance.

Tim

0 0

Answer

SELECTED ANSWER
replied on September 11, 2017 Show version history

Sounds like a good place for a custom validator. You could attach one to the field(s) where you want the error message displayed, then when Forms runs its internal validation (on blur, change etc.) it will trigger your custom rule as well.

The added benefit to this approach is that Forms will actually recognize it as "invalid" so it will prevent form submission, which is not the case if you just add your own message in custom HTML. However, the following is designed for recent 10.x versions of Forms, so if you're on version 9.x it will require different code.

As Raul suggested,

  1. Add the "gvm" class to the "GVM" field
  2. Add the "total" class to the "TARE and PW Total" field

However, instead of attaching event handlers to the fields and creating a custom error message, try adding the following code to your form.

$(document).ready(function(){
    // Create a custom validator to compare the two values
    window.Parsley.addValidator('yourvalidatorname', {
        validateString: function(value) {
            var gvm = parseInt($('.gvm input').val());
            var total = parseInt($('.total input').val());

            return (total <= gvm);
        },
        messages: {
            en: 'Your Error Message.',
        }
    });

    // Assign validator to your target field(s) by adding the attribute value
    $('.gvm input, .total input').attr('data-parsley-yourvalidatorname','');
});

Raul's suggestion will work perfectly fine if you want to take that approach, the only issue there would be preventing submission. Using a parsley validator will actually tell Forms not to let the user proceed until the issue is corrected and it behaves just like the built-in error messages, which is quite nice.

2 0

Replies

replied on September 11, 2017 Show version history

This JavaScript should get you started. 

To make it work. 

1. add a class name "gvm" to the GVM field

2. add a class name "total" to the TARE and TW Total field

3. add a Custom HTML field at the bottom of the form. Under the HTML tab type this in:

<span class="exceedesTotal"></span>

$( document ).ready(function() {
  
  $(document).on('blur change click', '.total input, .gvm input, .Submit', compateTotals);
  
  function compateTotals() {
  
  var gvm = $('.gvm input').val();
  var total = $('.total input').val();
  
  if (parseInt(total) > parseInt(gvm)) {
    
        $('.exceedesTotal').html('Total is greater than GVM');

      }
      else
      {


        $('.exceedesTotal').html('');
        return false;
    }
                    
}
                    
                    
  });

Dress it up however you wish.

CustomHTML.PNG
CustomHTML.PNG (9.15 KB)
0 0
replied on September 11, 2017

Thank you both!

Exactly what I was after.

Kind regards,

Tim

0 0
replied on January 29, 2018

Raul, I tried your outline above and it does not seem to be working.  Any suggestions???

0 0
replied on January 31, 2018

Are you trying the exact same functionality or something similar?

0 0
replied on January 31, 2018

not completely exact... I need to look at two values and make sure only one is greater than zero.  

 

//compare values for .miles and .gas
$( document ).ready(function() {
  
  $(document).on('blur change click', '.miles input, .gas input, .Submit', compateTotals);
  
  function compateTotals() {
  
  var privCar = $('.miles input').val();
  var county = $('.gas input').val();
  
  if (parseInt(miles) >= 0 && parseInt(gas) >= 0) {
    
        $('.exceedesTotal').html('If taking a private car GAS must be zero');

      }
      else
      {


        $('.exceedesTotal').html('');
        return false;
    }
                    
}
                    
                    
  });

 

0 0
replied on January 31, 2018

To check if either or is greater than zero use the once below instead: 

if ( (parseInt(miles) > 0) || (parseInt(gas) > 0) ){

 

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

Sign in to reply to this post.