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

Question

Question

JS validate table row

Forms
Updated March 3, 2022
asked on March 1, 2022 • Show version history

I am trying to validate two values in each row of a table. The 'Total Budget' should match the 'Sources Total', which is made up of all the user editable fields in this table.

The CSS classes are as follows: table is "PFSTable", the 'Total Budget' field is "total_budget_pfs", and the 'Sources Total' is 'total_sources_pfs'.

$(document).ready(function () {
  
  window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      return value == $('.total_budget_pfs input').val();
    },
    messages: {
      en: 'Values do not match!'
    }
  });
  
  // register validator on existing rows
  registerValidator();
});

function registerValidator(){
  // assign validator
  $('.PFSTable input').attr('data-parsley-notequalto','.total_sources_pfs input');
}

With this code, it works correctly on the first row in the table. However, every other row is still pointed to the first row for validation. 

Any ideas?

0 0

Replies

replied on March 1, 2022

I am not familiar with the addValidator method or most of what else is going on here but I think the issue is that this object

$('.total_budget_pfs input')

returns a list of inputs, for every input on the form with that class name. You are not specifying which input you want and which one you want to compare it to specifically.

I would write the logic like this: when a sources input changes, make sure it equals the Total Budget within the same tr element (or vice versa if it makes more sense)

And that looks like this

$('.PFSTable').on('change','.total_sources_pfs input',function() {
   
    if($(this).val() != $(this).closest('tr').find('.total_budget_pfs input').val())
             alert('The Values Do Not Match');
  });

 

0 0
View 4 previous replies
replied on March 2, 2022

Thanks for the reply! I tried using your code, but could not get it to work at all.

0 0
replied on March 2, 2022

As Chad mentioned, the issue is that your selector is just pulling them all rather than targeting a specific row.

The catch with the parsley validation is that parsley doesn't use $(this) so you need to access the target field in a different way.

You'll need to update the input parameters of the validateFunction so it can be accessed (see below)

  window.Parsley.addValidator('notequalto', {
    validateString: function(value, requirement, field) {
      var row = field.$element.closest('tr');
      return value == row.find('.total_budget_pfs input').val();
    },
    messages: {
      en: 'Values do not match!'
    }
  });

You have to include "requirement" because the order matters, but once you have the field input, you can use it to get the element using

field.$element

From there, we can use the approach Chad mentioned to get the parent row and identify the associated value specific to that row. 

1 0
replied on March 2, 2022 • Show version history

That worked, except my added up values are not being taken into account. I don't believe this was working properly either. It should just be checking that the Sources Total matches the Total Budget.

Do I need to try a completely different approach?

0 0
replied on March 2, 2022

Based on the screenshot it looks like your validation is being applied to every column, but it's validating the value of the column, not the total.

If you want to do that, then you need to target the total not the individual values.

The problem with validating the Sources Total is that a read-only column isn't going to require validation the same as editable fields.

You could use the row to find the Sources Total value same as we did for the total budget column instead of using the "value" input from the element, but then it will validate every time they update a column.

0 0
replied on March 2, 2022

So I would modify the total_sources_pfs input within the registerValidator function?

0 0
replied on March 2, 2022 • Show version history

That second part of the validator registration doesn't really do anything with a custom validator. For mine, that second part you have highlighted is always ''

The issue is the selector on the left because your selecting all inputs within the .PFSTtable class, which I assume would include every column of your table.

So what happens is that each individual column is being compared to your total, so it would be impossible for them all to pass validation unless they were all 0.

What you need to do is only target the specific column you want to match when determining whether or not it is valid.

Additionally, you should have a separate class for your "total budget" and "sources total" fields otherwise distinguishing will be a huge hassle.

Option 1 - Only assign the validator to one of your total columns and compare it to the other one.

Option 2 - Assign the validator to all of the editable columns, but return a comparison of the two totals columns rather than using the value input.

0 0
replied on March 3, 2022 • Show version history

I originally wanted to select the inputs on the table because that is where the user makes changes in order to calculate the Sources Total, which matches the Total Budget. However, as long as the user can determine that the inputs contribute to the Sources Total, it should be fine to display the validation message anywhere.

Sorry I misspoke in my original post, I have a class for each total column, total_budget_pfs and total_sources_pfs .

I suppose option 2 would be the cleaner option, I tried adding the total_sources_pfs input to the registerValidator function. It is not working, I'm assuming the issue is that field is read-only?

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

Sign in to reply to this post.

Details
Related Posts
Loading ...