Require all columns in a table row if field not blank

$(document).ready(function () { $('.cf-table-block').on('blur', 'input', checkdate); function checkdate() { $('.cf-table-block tbody tr').each(function () { if ($(this).find('.dateFlex input').val() != "") { $(this).find('.hoursFlex input, .typeFlex input, .reasonFlex input').attr('required', true); } else { $(this).find('.hoursFlex input, .typeFlex input, .reasonFlex input').attr('required', false); } }); } });

replied on November 7, 2018

First question, if the "date" column is empty, would there be any need to enter information in the other columns?

If not, then you can set them all as required, then create a Field Rule that hides them unless the date field is populated.

If a field is required, but hidden and set to "ignore values" when hidden, then the required attribute will not be enforced.

The end result is that when they are presented, they are required, but they are only shown when the conditions are met.

On a side note, the reason the code is not working is probably because the table likely has a variable number of rows. When the document ready event is triggered, the table has only one row, so when you add more, they do not have that same event bound to them because they didn't exist when the event handlers were added.

The way to fix your code, if you want to keep using that approach, would be to attach an event handler to the "add row" link/button so each time it is clicked it adds the appropriate event handler to the new row. Alternatively, you could try monitoring the entire table for change events and loop throw each row, but personally I think the fields rules are the cleaner solution.

1 0

Question

Question

Require all columns in a table row if field not blank

Replies

Sign in to reply to this post.