Hello Blake,
Suppose the fields that you want to be required are in the class .required, and the items to be revealed upon completion of the required fields are in the class .maybe-show. (In a table, you can set column classes in the "Advanced" tab of the menu shown when clicking "Field options".)
In the custom CSS box, we hide the .maybe-show items as default:
.maybe-show {display: none;}
In your example, the "Rating" column is given the .required class and your rating fields at bottom are given the .maybe-show class. Then the following custom JavaScript code should work:
// WHEN THE VALUE OF A REQUIRED FIELD CHANGES
$(document).on('change', '.required select', function () {
// UNLESS A REQUIRED FIELD IS BLANK, REVEAL .maybe-show ITEMS
var displayit = true;
$('.required select').each(function () {
// CHECK EACH REQUIRED ITEM TO SEE IF IT IS BLANK
if($(this).val() == '') {
// IF BLANK, DO NOT SHOW THE .maybe-show ITEMS
displayit = false;
}
});
if(displayit) {
$('.maybe-show').css('display','inherit');
}
});
You can have multiple "types" of .maybe-show items to reveal based on different criteria. Note that if adapting the above code to work with other input types besides drop-down menus, substitute ".required input" for ".required select", etc. If you have multiple input types, you can use commas, e.g. $('.required select, .required input').
Hope this helps!