Question

Parsley validator - validate against first entry in a table

Forms Web Customizations

Updated March 2, 2022

asked on February 22, 2019 • Show version history

I'm trying to figure out if/how I can use the parsley validator to compare fields in a table and alert if subsequent entries DO NOT match the first entry.

In our leave request process, we need for leave request dates to all be in the same pay period. Request dates (Date of Leave) are entered in a table, and the pay period dates (PPE) are populated from a lookup. As rows are added (up to five) I'd like to find a way to alert users when additional dates entered in the table do not match the PPE of the first entry.

I've found posts here and here that use the parsley validator to look for and alert when there is a duplicate, but that's the opposite of what I want.

Here is what I have so far:

$(document).ready(function(){
register();
$('.RequestTypeDetails').click(register);
window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      var valueLookup = $('.PPEdate input').map(function() {return $(this).val(); }).get();
      return _.filter(valueLookup, function(v) { return v !== value }).length == 1;
    },
    messages: {
      en: 'Leave dates must be in the same pay period!',
    }
});
function register()
{
    $('.PPEdate input').attr('data-parsley-notequalto', '');
    $('.PPEdate input').change(function(){
      $('.PPEdate input').each(function(index, el){$(el).parsley().validate();})
    });
}
});

I'd be most grateful for any assistance. Thank you.

1 0

Answer

SELECTED ANSWER

replied on February 25, 2019

You can use the following code, just add a "PPEtable" class to to the table and this should work as-is. I included comments to explain each piece.

$(document).ready(function(){
  // Not equal validator
  window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      // return whether or not the value is the same as the first row
      return value == $('.PPEdate input:eq(0)').val();
    },
    messages: {
      en: 'Leave dates must be in the same pay period!',
    }
  });
  
  // assign validator when new rows are added
  $('.PPEtable .cf-table-add-row').click(function(){
    registerValidator();
  });
  
  // register validator on existing rows
  registerValidator();
});

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

However, I get the impression that you could just use functions to automatically set this value if it has to be the same anyway.

2 0

Replies

replied on February 22, 2019

You would just need to set the validator to compare the current value to the first row by using the index. For example, something like

$('.PPEdate input').eq(0).val()

$('.PPEdate input:eq(0)').val();

so instead of the mapping and all that, just check return

value = $('.PPEdate input:eq(0)').val()

If they're equal, then no error. If they're not equal, it returns false on the validation fails and you get the error message.

1 0

replied on February 25, 2019

Thank you so much. Unfortunately my knowledge is not very strong so I need a little more explicit help. Could I ask you to please lay out the parts that I need to change?

Thank you.

1 0

View 3 previous replies

SELECTED ANSWER

replied on February 25, 2019

You can use the following code, just add a "PPEtable" class to to the table and this should work as-is. I included comments to explain each piece.

$(document).ready(function(){
  // Not equal validator
  window.Parsley.addValidator('notequalto', {
    validateString: function(value) {
      // return whether or not the value is the same as the first row
      return value == $('.PPEdate input:eq(0)').val();
    },
    messages: {
      en: 'Leave dates must be in the same pay period!',
    }
  });
  
  // assign validator when new rows are added
  $('.PPEtable .cf-table-add-row').click(function(){
    registerValidator();
  });
  
  // register validator on existing rows
  registerValidator();
});

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

However, I get the impression that you could just use functions to automatically set this value if it has to be the same anyway.

2 0

replied on February 25, 2019

This level of detail is AWESOME and I so appreciate it. I discovered that it will not work using the Forms read-only Field Option, so I am now working my way through that. Thank you again!

0 0

replied on February 25, 2019

For the sake of clarity, if the field is read-only, under what circumstances could the value be different? For example, is it a lookup value or something else?

0 0

replied on February 26, 2019

Yes, it is a lookup value.

1 0

replied on February 26, 2019

Another option might be to attach the validator to the field that triggers the lookup instead since it is probably editable.

That is a little bit tricker, but it is definitely possible. The error message would show there instead of on the date, but it would get around the read-only issue.

0 0

replied on March 2, 2022 • Show version history

@████████ Any idea how to get this to work with two total fields in a table row? See my post here.

0 0

You are not allowed to follow up in this post.

Question

Question

Parsley validator - validate against first entry in a table

Answer

Replies

Sign in to reply to this post.